Question

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

由于某种原因，由于传递给上级父组件的回调不同，因此未通过附件设置状态。如果删除第二个回调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 },
    });
  };

Answer 1

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

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

Answer 2

由于我们不知道this.props.handleChange()所做的事情的上下文，因此我给出了一个通用的答案。尝试通过以下方式更改功能：

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

Answer 3

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

<Attachment key="attachment-key" />

防止回调setState

3 个答案: