Question

在状态更新之前，组件以初始状态渲染。

初始状态为null，单击按钮时onHandlePrint方法将更新状态。

class App extends React.Component {

  state = {
    pdf: null,
  };

  updatePDF = (data) => {

  }

  onHandlePrint = (pdf) => {
    this.setState({pdf}, () => {
      this.updatePDF(this.state.pdf)
   })
  }

  render() {
    return (
      <div className="container">
        <Router>
          <ActivityDetail results={this.state.results} clickPrint={this.onHandlePrint} />
          <Switch>
            <Route 
              path="/pdf" 
              render={() => (
                <PDFDocument data={this.state.pdf} />
              )} 
            />
          </Switch>
        </Router>
      </div>
    );
  }

}

该按钮是一个链接，用于打开一个新选项卡，该选项卡将呈现PDF文档，并将传入事件的数据作为“ obj”

const ActivityDetail = ({ results, clickPrint }) => {

  const renderedList = results.map((obj, index) => {

    return (
      <li key={index}>
        <div className="service-container">
          <Link to="/pdf" target="_blank" className="print-button-container">
            <button 
              className="print-button" 
              onClick={() => clickPrint(obj)} 
            >Print</button>
          </Link>
        </div>
      </li>
    );
  });

  return (
    <div>
      <ul>
        {renderedList}
      </ul>
    </div>
  );
};

export default ActivityDetail;

这是PDF文档，当单击“打印”按钮但道具未定义时，应该获取数据。

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
})

const PDFDocument = (props) => {

  const { NameOfService } = props

  console.log('props:', props)
  return(
    <PDFViewer className="pdf-viewer">
      <Document>
        <Page size="A4" style={styles.page}>
          <View style={styles.section}>
            <Text>
              {NameOfService}
            </Text>
          </View>
        </Page>
      </Document>
    </PDFViewer>
  )  
}

export default PDFDocument

编辑

所以我所知道的是处理新设置状态的方法的回调。

onHandlePrint = (pdf) => {
   this.setState({pdf}, () => {
      this.updatePDF(this.state.pdf)
   })
  }

我的新问题是如何将数据从updatePDF方法发送到组件？

Answer 1

您不应该在setState回调函数中setState。相反，它应该返回新状态。这个：

onHandlePrint = (pdf) => {
    this.setState({pdf}, () => {
      this.setState({pdfStatus: true})
    });
  };

应为：

onHandlePrint = (pdf) => {
    this.setState(() => {pdf, pdfStatus: true});
  };

但是实际上，如果您不需要使用以前的状态，则不需要使用回调。只要做：

onHandlePrint = (pdf) => {
    this.setState({pdf, pdfStatus: true});
  };

Answer 2

使用async和await

onHandlePrint =  async (pdf) => {
    await this.setState({pdf}, () => {
        this.setState({pdfStatus: true})
    });
};

组件渲染之前事件处理程序未设置状态

2 个答案: