Question

我制作了一个jsx数组react组件。该组件应根据状态值进行更改，但是即使状态更改和jsx数组发生更改，react也不会重新呈现。

如果我使用console.log显示状态，则状态会发生变化并且项目（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

您正在teams内对deleteNode进行突变。

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

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

您需要做的就是更改

const tmpNodes = teams;

收件人

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

状态更改时，React jsx数组组件不会重新呈现

1 个答案: