react 因为this.setState是异步生效的，我想要通过this.setState来赋予控制改如何做

Question

onChange(key) {
    let detailData = [];
    let TimelineChild = [];
    const orderCodeData = {
      orderCode: key,
    };
    const self = this;
    self.setState({
      itemList:[],
    })
    callGetDetailLogMemoFn(orderCodeData).then((res) => {
      detailData = res.data;
      detailData.map((item) => {
        const detailDataGmtCreate = item.gmtCreate;
        const detailDataLogMemo = item.logMemo;
        const reg = /\u5931\u8D25/g;
        const regBeyond = /\u8d85\u65f6/g;
        const regs = reg.test(detailDataLogMemo);
        const regBeyonds = regBeyond.test(detailDataLogMemo);
        if (regs || regBeyonds) {
          if (detailDataLogMemo !== null && detailDataLogMemo.length >= 64) {
            TimelineChild.push(
              <Timeline.Item color="red" key={item.id}>
                {detailDataGmtCreate} - {detailDataLogMemo.substring(0, 50)}
                <Button type="primary" size="small" onClick={this.handleDetail.bind(this, detailDataLogMemo)}>详情</Button>
              </Timeline.Item>
            )
          } else {
            TimelineChild.push(
              <Tooltip placement="topRight" arrowPointAtCenter key={item.id} title={detailDataLogMemo}>
                <Timeline.Item color="red" key={item.id}>
                  {detailDataGmtCreate} - {detailDataLogMemo.substring(0, 50)}
                </Timeline.Item>
              </Tooltip>
            )
          }
        } else {
          if (detailDataLogMemo !== null && detailDataLogMemo.length >= 64) {
            TimelineChild.push(
              <Timeline.Item key={item.id}>
                {detailDataGmtCreate} - {detailDataLogMemo.substring(0, 50)}
                <Button type="primary" size="small" onClick={this.handleDetail.bind(this, detailDataLogMemo)}>详情</Button>
              </Timeline.Item>
            )
          } else {
            TimelineChild.push(
              <Tooltip placement="topRight" arrowPointAtCenter key={item.id} title={detailDataLogMemo}>
                <Timeline.Item key={item.id}>
                  {detailDataGmtCreate} - {detailDataLogMemo.substring(0, 50)}
                </Timeline.Item>
              </Tooltip>
            )
          }
        }
        self.setState({
          itemList: <Timeline>{TimelineChild}</Timeline>
        })
      })
    });
  }

我是用的antd的折叠面板组件，在onChange事件中，我将数据进行遍历放进了数组中，然后渲染出来，现在我想要使用this.setState在刚刚触发onChange事件，还没有开始处理数据之前先将TimelineChild里面清空一次，该如何做？

Answer 1

用回调啊。

this.setState({
  itemList:[],
}, () => {
  // Blah blah 
})

Answer 2

1. 用this.setState的第二参数，给一个回调来在更新后执行，例如:

this.setState({ something: true }, () => console.log(this.state))

2. 用componentDidUpdate()这个生命周期方法，把确定更新后要作的代码放里面。

3. mobx有神奇的@observer与@observable可以作这事。

@observer class Select extends React.Component {
  @observable selection = null; /* MobX managed instance state */

  constructor(props, context) {
    super(props, context)
    this.selection = props.values[0]
  }
  //...

上面代码取自这篇文章的里: https://medium.com/@mweststra...

Answer 3

确实。this.setState的第二参数，在这个回调里能拿到更新的state。完美解决异步问题。