javascript - React JS Router 改变元素的 props

Question

我陷入了 SSR 和 CSR 的结合。

我正在将网格数据(来自 php)传递到网格组件。该组件如下所示:

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

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 显示了带有来自状态的新 addet 行的 props。这怎么可能？

编辑:看看:streamable.com/ks8wf网格组件充满了 Prop 。表组件不是。如果我将 url 更改为表，则网格不会重置。如果我从表格更改为网格并返回，表格组件将被重置

亲切的问候

Answer 1

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