将数据从回调传递到 React 组件

Pass data from callback to React component?

本文关键字:React 组件 数据 回调      更新时间:2023-09-26

我正在渲染一个需要异步返回数据的响应组件。当 react 组件从回调返回时,我应该如何将其传递给它?

目前在渲染函数中:

var dataToReturn; 
asynchCall(args, function(err, results) {
  dataToReturn = results;
})
return (
    <MyComponent data={dataToReturn} />
)

这当然是行不通的,因为数据尚未返回。如果我将渲染移动到回调中,这似乎是一个糟糕的编程模式。React API 中是否有任何针对此用例的内容?

谢谢!

是的,就像@Fouad说的:

var NewComponent = React.createClass({ 
    componentDidMount: function() {
       asynchCall(args, function(err, results) {
          this.setState({data: results});
       }.bind(this));
    },
    return (
        <MyComponent data={this.state.data} />
    )
});

另外,请查看文档页面通过 AJAX 加载初始数据

你应该使用 this.state & this.setState 而不是局部变量,这将触发重新渲染。查看此链接,了解如何从服务器获取 http://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server