React jsx数组组件在状态更改时不会重新渲染

Question

我做了一个 jsx 数组反应组件。这个组件应该根据状态值改变，但是即使状态改变和 jsx 数组改变，react 也不会重新渲染。

如果我使用console.log显示状态，状态会发生变化，items（jsx数组组件）值也会发生变化，但不会发生重新渲染。

const Teams = () => {
    const [teams, setTeams] = useState([
    {
        id: "sldkfjsdf",
        level: 0,
        name: "test1",
        children: [{ id: "kjhckjhs", level: 1, name: "test1-1", children: [] }]
     },
     { children: [], id: "sdlkfjsdf234", level: 0, name: "test2" }
    ]);

    var items = [];

    const deleteNode = id => {
        const tmpNodes = teams;

        // check level 0
        var index = tmpNodes.findIndex(tmpNode => tmpNode.id === id);
        if (index >= 0) {
            tmpNodes.splice(index, 1);
        } else {
            // check level 1
            tmpNodes.forEach(tmpTeam => {
            index = tmpTeam.children.findIndex(child => child.id === id);
            if (index >= 0) {
                tmpTeam.children.splice(index, 1);
            }
        });
      }

      setTeams(tmpNodes);
    };

    if (teams) {
    teams.forEach(team => {
      items.push(
        <div
          onClick={() => {
            deleteNode(team.id);
          }}
          key={team.id}
        >
          {team.name}
        </div>
      );
      team.children.forEach(child => {
        items.push(
          <div
            onClick={() => {
              deleteNode(team.id);
            }}
            key={child.id}
          >
            {child.name}
          </div>
        );
      });
    });
  }
  return <>{items}</>;
};

export default Teams;

我希望当我删除节点时，反应重新渲染“项目”。

Answer 1

你在 deleteNode 内部变异 teams。

即使您将teams 分配给tempNodes，这仍然是同一个对象引用。

您可以通过创建teams 的副本并使用扩展运算符... 将其分配给tempNodes 来快速解决此问题

你需要做的就是改变

const tmpNodes = teams;

到

// Create a copy of teams as a new array
const tmpNodes = [...teams];