Javascript React JS路由器更改元素的道具

我被困在SSR和CSR的组合中

我正在将网格数据（从php）传递到网格组件。 该组件如下所示：

如果单击“添加”按钮，它将向表中添加新行。 当我单击“表格”链接时，组件将更改为表格。 当我点击“网格”链接返回网格组件时，它会保留新的addet行

constructor(props) {
       super(props);
       console.log(props);
       this.state = {
           clicked: false,
           grid: props.grid
       };

       console.log(this.state);

       this.handleClick = this.handleClick.bind(this);
       this.handleButton = this.handleButton.bind(this);

   }

   handleButton() {
       fetch('/react/add')
           .then(data => {
               return data.json()
           })
           .then(json => {
               let grid = this.state.grid;
               grid.data = [...grid.data, ...JSON.parse(json)];
               this.setState({
                   grid: grid
               });
           });
   } 

console.log显示了道具和state中新添加的行。 这怎么可能呢

编辑： 请看：栅格组件中充满了道具。表组件不可用。如果我将url更改为table，则不会重置网格。如果我在表格和网格之间来回切换，表格组件将重置

亲切的问候

handleButton（）{
获取（'/react/add'）
。然后（数据=>{
返回data.json（）
})
。然后（json=>{
//现在网格是一个新对象
设网格={
…这是国家电网，
数据：[…grid.data，…JSON.parse（JSON）]
};
这是我的国家({
网格：网格
});
});
}

遗憾的是，这不是我想要的。我的问题是，道具被更改了，而不是状态。您是否查看了

componentdiddupdate（）

？这也不起作用。。请看：栅格组件中充满了道具。表组件不可用。如果我将url更改为table，则不会重置网格。如果我从一个表格切换到另一个表格，表格组件就会被重置——它工作了！谢谢！：）请您解释一下，为什么这个解决方案有效？你说这是一个新对象，但我真的不明白，为什么我的解决方案在这里失败..原因是当你做类似“grid.data=[…grid.data，…JSON.parse（JSON）]；”您在不更改网格对象的情况下更改网格的数据，现在网格对象有更多的行，当您返回网格页面时，您仍然有相同的对象（有更多的行），但是如果您通过写入“grid={…grid，data:[…grid.data，…JSON.parse（JSON）]来使用网格对象，如不可变对象，则您不必更改props.grid，而是创建新对象，当您返回到网格页面时，您将拥有与第一次timelook时发送的相同的对象，非常感谢！我想我明白了：）