React JS Router меняет реквизиты элемента

Question

Я застрял в комбинации SSR и CSR.

Я передаю данные сетки (от php) в сетку составная часть. Компонент выглядит следующим образом:

Если я нажму кнопку «добавить», он добавит новую строку в таблицу. Когда я нажимаю на ссылку «таблица», компонент меняется на таблицу. Когда я нажимаю на ссылку "grid", чтобы вернуться к компоненту grid, он сохраняет новые строки аддета.

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 показывает реквизиты с новыми строками аддета из состояния , Как это вообще возможно?

Редактировать: Взгляните на: streamable.com / ks8wf Компонент сетки заполнен реквизитом. Компонент таблицы не является. Если я изменю 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
               });
           });
   }