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

我制作了一个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;

const团队=（）=>{
const[teams，setTeams]=useState([
{
id:“sldkfjsdf”，
级别：0，
名称：“test1”，
子项：[{id:“kjhckjhs”，级别：1，名称：“test1-1”，子项：[]]
},
{子项：[]，id:“sdlkfjsdf234”，级别：0，名称：“test2”}
]);
var项目=[]；
const deleteNode=id=>{
const tmpNodes=团队；
//检查级别0
var index=tmpNodes.findIndex（tmpNode=>tmpNode.id==id）；
如果（索引>=0）{
TMP节点拼接（索引1）；
}否则{
//检查级别1
tmpNodes.forEach（tmpTeam=>{
index=tmpTeam.children.findIndex（child=>child.id==id）；
如果（索引>=0）{
tmpTeam.子项拼接（索引1）；
}
});
}
SETTAMS（tmpNodes）；
};
国际单项体育联合会（小组）{
teams.forEach（团队=>{
推(
{
deleteNode（team.id）；
}}
key={team.id}
>
{team.name}
);
team.children.forEach（child=>{
推(
{
deleteNode（team.id）；
}}
key={child.id}
>
{child.name}
);
});
});
}
返回{items}；
};
导出默认团队；

---

我希望当我删除节点时，react重新呈现“items”。

您正在

团队
内部
删除节点

即使将
团队
分配给
临时节点
，这仍然是相同的对象引用

您可以通过创建
团队
的副本，并使用扩展操作符
将其分配给
临时节点
来快速修复此问题。…

你所需要做的就是改变

const tmpNodes = teams;

到

如果将“键”属性添加到每个以节点id为值的项，是否会重新渲染？对于动态填充的内容数组，如果没有key属性，react无法区分这两个值。如果您查看开发人员工具，您可能会看到警告。是否可以包含组件的完整源代码？您的
deleteNode
外观如何？这看起来是可能导致这些问题的一个重要部分。我上传了所有代码。请让我知道你告诉我的解决方法是正确的。在我更改代码后，它工作了。我为你节省了很多时间和精力。非常感谢。对不起，弄错了。。你救了我^^
// Create a copy of teams as a new array
const tmpNodes = [...teams];