回调阻止 setState答案

【问题标题】：Callback prevent setState回调阻止 setState
【发布时间】：2019-09-20 06:43:30
【问题描述】：

我在父组件上有一个带有用于浏览按钮的子组件的页面，带有一个回调，我使用浏览的文件设置状态。

由于某种原因，由于传递给更高父组件的不同回调，未使用附加文件设置状态。如果我删除第二个回调 this.props.handleChange('attachment', file); 一切正常。知道为什么吗？（第二次回调没有问题，没有错误等）

Attachment页面：

export default class Attachment extends React.Component {
  state = {
    attachment: {},
  };

  handleAddAttachment = file => {
    this.setState({ attachment: file });
    this.props.handleChange('attachment', file); // this causes the previous line to not working.
  };

  render() {
    const { attachment } = this.state;

    return (
      <Fragment>
        <div>
          <div>
            Do you have
            <br />
            something to <LineBreak />
            show me?
          </div>
          <div css={attach}>Upload attachments here</div>
          <AttachmentButton  handleAddAttachment={this.handleAddAttachment} />
          <AttachedFile attachment={attachment} />
        </div>
      </Fragment>
    );
  }
}

父组件上的makeHandleChange方法：

  makeHandleChange = (pageName, change) => {
    this.setState({
      ticket: { ...this.state.ticket, [pageName]: change },
    });
  };

【问题讨论】：

为什么不让父通过state控制附件，作为prop传递给子呢？
this.props.handleChange 有什么作用？它的背景是什么？
@user3378165 请看下面我的回答。
@Avanthika，我在问题中添加了this.props.handleChange的调用方法
请也分享您的父代码。

标签： reactjs

【解决方案1】：

我认为是因为您的父组件获得了新状态，所以它会重新渲染，也会导致子组件重新渲染并取消状态。为了让您的孩子保持完整，您可以为您的子组件设置一个关键道具，或者您可以使用 shouldComponentUpdate。在你的父母身上是这样的

<Attachment key="attachment-key" />

【讨论】：

当然，我是通过手机发帖的，所以无法添加。我会解决的
你能分享一个沙盒来解决你的问题吗？

【解决方案2】：

我不知道为什么这不起作用，但您可能想尝试一种解决方法：将函数作为第二个参数传递给 setState。

在此处查看示例： react set state callback correct way to pass an argument

【讨论】：

【解决方案3】：

由于我们不知道 this.props.handleChange() 所做的事情的背景，我给出了一个通用的答案。尝试以这种方式更改函数：

  handleAddAttachment = file => {
    this.setState({
      attachment: file 
    }, () => {
       this.props.handleChange('attachment', file);
    });  
  };

【讨论】：