Question

我正在将道具注入组件的初始状态。如果要单击组件内部的某个按钮，则要更改状态，并且要立即立即反映数据。

go test -benchmark是一个对象，其中包含两个属性，一个是键（另一个对象），另一个是对象数组

数据结构如下：

eventData --->
eventData

    {
    key:{}
    events: [{},{},...]
    }

自从我更新状态以来，结果未得到反映。我可以使用 componentDidUpdate 从即将更新的状态更新状态吗？

Answer 1

您可以尝试在不触摸componentDidUpdate（）的情况下将传入数据保留在道具来自的父组件上。然后从该组件传递一个函数以对该组件的状态进行更改。然后再次渲染子组件。

如果要同时更改“父”组件和“子”组件数据，则可以尝试以下操作。这不是一个好方法，但是应该可以。

class Parent extends Component
{
  ....
  this.state = {dataFromSever:""}
  ...

  changeData = (data) => 
     {
     this.setState({dataFromServer:data});
     }
  ...

   render()
   {
       ...
        /* 
        * ReactDOM.unmountComponentAtNode is goint to unmount react component from 
        * 'container' component. 
        * For now, just consider 'container' where you put react components. 
        */
        ReactDOM.unmountComponentAtNode(document.getElementById('container'));
        ReactDOM.render(<ChildComponent changeData={this.changeData} 
        currentData={this.state.dataFromServer}> 
        </ChildComponent>,document.getElementById('container'));
        ...
   }

}

和

class ChildComponent extends Component
{
  ....
  ...

  handleClickButton = (event, action) => {

      const {eventData} = this.props;


      axios.post(configs.Data.sendEvent, {events: event, 
      flightTaskKey:eventData.flightKey, action:action})
      .then(res=>{
           this.props.changeData(res.data.singleResult.dataEvent);
      });

      };
  ...

   render()
   {
    ... <...> this.props.currentData </...>
   }

}

从返回的服务器数据更新组件的状态

1 个答案: