javascript - 如何在React/Framer中找到数组中的特定项目？

我从API提取结果，如下所示：

  const [state, setState] = React.useState({

        matches: undefined,
        chosenBets: [{}]
      });


        const API = "https://api.myjson.com/bins/i461t"

      const fetchData = async (endpoint, callback) => {
        const response = await fetch(endpoint);
        const json = await response.json();
        setState({ matches: json });
      };

并使用map()函数基于JSX渲染：

export function MatchCardGroup(props) {
  return (
    <div>
      {props.matches.map((match, i) => {
        return (
          <MatchCard
            key={i}
            matchCardIndex={i}
            team_home={match.teams[0]}
            team_away={match.teams[1]}
            league_name={match.sport_nice}
            odd_home={match.sites[0].odds.h2h[0]}
            odd_draw={match.sites[0].odds.h2h[1]}
            odd_away={match.sites[0].odds.h2h[2]}
            onClick={props.onClick}
            timestamp={match.timestamp}
          />
        );
      })}
    </div>
  );
}

然后，我有一张上面有几率的卡，每一个都有自己的点击事件：

export function MatchCard(props) {
  const [state, setState] = React.useState({
    selection: {
      id: undefined
    }
  });

  const {
    timestamp,
    team_home,
    team_away,
    league_name,
    odd_away,
    odd_draw,
    odd_home,
    onClick,
    matchCardIndex,
    selection
  } = props;

  const odds = [
    {
      id: 0,
      label: 1,
      odd: odd_home || 1.6
    },
    {
      id: 1,
      label: "X",
      odd: odd_draw || 1.9
    },
    {
      id: 2,
      label: 2,
      odd: odd_away || 2.6
    }
  ];

  const handleOnClick = (odd, oddIndex) => {
    // need to changhe the selection to prop
    if (state.selection.id === oddIndex) {
      setState({
        selection: {
          id: undefined
        }
      });
      onClick({}, matchCardIndex);
    } else {
      setState({
        selection: {
          ...odd,
          team_home,
          team_away
        }
      });
      onClick({ ...odd, oddIndex, team_home, team_away, matchCardIndex });
    }
  };

  React.useEffect(() => {}, [state, props]);

  return (
    <div style={{ width: "100%", height: 140, backgroundColor: colour.white }}>
      <div>
        <span
          style={{
            ...type.smallBold,
            color: colour.betpawaGreen
          }}
        >
          {timestamp}
        </span>
        <h2 style={{ ...type.medium, ...typography }}>{team_home}</h2>
        <h2 style={{ ...type.medium, ...typography }}>{team_away}</h2>
        <span
          style={{
            ...type.small,
            color: colour.silver,
            ...typography
          }}
        >
          {league_name}
        </span>
      </div>

      <div style={{ display: "flex" }}>
        {odds.map((odd, oddIndex) => {
          return (
            <OddButton
              key={oddIndex}
              oddBackgroundColor={getBackgroundColour(
                state.selection.id,
                oddIndex,
                colour.lime,
                colour.betpawaGreen
              )}
              labelBackgroundColor={getBackgroundColour(
                state.selection.id,
                oddIndex,
                colour.lightLime,
                colour.darkBetpawaGreen
              )}
              width={"calc(33.3% - 8px)"}
              label={`${odd.label}`}
              odd={`${odd.odd}`}
              onClick={() => handleOnClick(odd, oddIndex)}
            />
          );
        })}
      </div>
    </div>
  );
}

在我的App组件中，我记录了click事件返回的对象：

  const onClick = obj => {
    // check if obj exists in state.chosenBets
    // if it exists, remove from array
    // if it does not exist, add it to the array
    if (state.chosenBets.filter(value => value == obj).length > 0) {
      console.log("5 found.");
    } else {
      console.log(state.chosenBets, "state.chosenBets");
    }
  };

我想做的是：


当用户单击任意给定匹配项的奇数时，将该奇数添加到chosenBets
如果用户取消选择奇数，请从chosenBets中删除​​该奇数
任何时候在任何一场比赛的3个可能性中，只有1个能被选择


加分：所选奇数是根据App的全局状态而不是局部状态选择的。因此，如果我在其他地方编辑数组，则应该在用户界面中对其进行更新。

任何帮助将不胜感激，我在这里迷路了！

Link to Codesandbox

最佳答案

我对您的项目进行了简短介绍，以下是一些可以帮助您的提示：

通过引用，对象仅相等。

这意味着

{ id: 0, matchCardIndex: 8 } === { id: 0, matchCardIndex: 8 }

是错误的，即使您期望它是真实的。要比较它们，您需要比较对象中的每个键：

value.id === obj.id && value.matchCardIndex === obj.matchCardIndex

这也会影响您在index.tsx中进行的过滤器调用，因此您应该在此处将比较更改为类似于

state.chosenBets.filter(value => value.id === obj.id && value.matchCardIndex === obj.matchCardIndex)

国家只能居住在一个地方

正如您已经提到的，最好将状态保留在index.tsx中（如果您也需要），并且不要将其保留在本地树中。我建议让组件仅呈现状态，并让处理程序更改状态。

例

这是您的代码沙箱的一个分支，我认为它是按照您描述的方式实现的：https://codesandbox.io/s/gifted-star-wg629-so-pg5gx