在调用componentDidMount()之前调用React render()
在我的componentDidMount()中，我做了一个API调用来获取一些数据，然后这个调用设置了一个我在我的渲染中使用的状态对象。
componentDidMount() {
const { actions } = this.props;
this.increase = this.increase.bind(this);
// api call from the saga
actions.surveyAnswersRequest();
// set breadcrumb
actions.setBreadcrumb([{ title: 'Score' }]);
actions.setTitle('Score');
this.increase();
}在我的渲染函数中，我将一些正确的值传递给视图文件：
render() {
const { global, gallery, survey_answers, survey, survey_actual_answers } = this.props;
if (global.isFetching) {
return <Loading />;
}
return this.view({ gallery, survey_answers, survey, survey_actual_answers });
}我遇到的问题是，第一次加载页面时，survey_actual_answers属性没有被设置，但是当我刷新页面时，属性会很好地返回数据，脚本的其余部分将运行。这只是它第一次为该prop值返回一个空数组。
这是我如何通过我的道具的：
Score.propTypes = {
actions: PropTypes.object.isRequired,
global: PropTypes.object.isRequired,
survey: PropTypes.object.isRequired,
survey_answers: PropTypes.object.isRequired,
gallery: PropTypes.object.isRequired,
survey_actual_answers: PropTypes.array.isRequired,
survey_score_system: PropTypes.array.isRequired,
survey_styles: PropTypes.object.isRequired,
survey_general_doc_data: PropTypes.object.isRequired
};
function mapStateToProps(state, ownProps) {
return {
...ownProps,
global: state.global,
gallery: state.gallery,
survey: state.survey,
survey_actual_answers: state.survey.survey_actual_answers,
survey_answers: state.survey.survey_answers,
survey_score_system: state.survey.survey_score_system,
survey_styles: state.survey.survey_styles,
survey_general_doc_data: state.survey.survey_general_doc_data,
isFetching: state.isFetching
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
...globalActions,
...galleryActions,
...surveyActions
}, dispatch)
};
}有人知道为什么会这样吗？这几乎就像它根本不调用componentDidMount一样。
回答 3
Stack Overflow用户
发布于 2017-07-27 15:07:16
这是因为React从根本上是如何工作的。React应该感觉快速、流畅和快速；应用程序永远不会被http请求或异步代码阻塞。答案是使用生命周期方法来控制DOM。
挂载组件意味着什么？
更好地理解一些React词汇可能会有所帮助。当一个组件被挂载时，它被插入到DOM中。这是调用构造函数的时候。componentWillMount几乎是构造函数的同义词，并且几乎在同一时间被调用。componentDidMount只会在第一次渲染后调用一次。
componentWillMount --> render --> componentDidMount
与重新渲染或更新有什么不同？
现在组件在DOM中，您想要更改显示的数据。当从父组件调用setState或传递新的属性时，组件更新将会发生。
componentWillRecieveProps -->应该更新组件-->组件
-->render-->componentDidUpdate
同样值得注意的是，http请求通常是在componentDidMount和componentDidUpdate中完成的，因为我们可以在这两个地方使用setState触发重新渲染。
那么在渲染发生之前如何获取数据呢？
好吧，人们有几种方法来解决这个问题。第一个是在你的组件中设置一个初始状态，以确保如果来自http请求的数据还没有到达，它不会破坏你的应用程序。它将使用默认或空状态，直到http请求完成。
我通常不喜欢有一个加载模式，但有时它是必要的。例如，当用户登录时，在他们完成身份验证之前，您不希望将他们带到站点的受保护区域。我尝试做的是在用户登录时使用加载模式，在不影响用户体验的情况下尽可能多地加载数据。
您还可以使组件显示为正在加载，而不会影响站点其余部分的用户体验。我最喜欢的例子之一是Airbnb website。请注意，站点的大部分内容都可以使用，您可以滚动，单击链接，但“体验”下的区域处于加载状态。这是使用React的正确方式，也是为什么setState和HTTP请求在componentDidMount/componentDidUpdate中完成的原因。
Stack Overflow用户
发布于 2018-10-11 12:16:34
在组件中使用setState。这是我的代码：
async componentDidMount() {
danhSachMon = await this.getDanhSachMon();
danhSachMon=JSON.parse(danhSachMon);
this.setState(danhSachMon);
}
render() {
return (
<View>
<FlatList
data={danhSachMon}
showsVerticalScrollIndicator={false}
renderItem={({ item }) =>
<View >
<Text>{item.title}</Text>
</View>
}
keyExtractor={(item, index) => index.toString()}
/>
</View>
)
}Stack Overflow用户
发布于 2018-07-31 21:30:18
componentWillMount已弃用。现在您需要使用"DidMount“，一旦它完成并在呈现时更改DOM，react将处理其他所有事情。
确保在渲染中更新并使用正确的变量/状态/属性。
componentDidMount() {
const { applicationId } = this.props;
if (applicationId) {
ApplicationService.getQuotesByApplicationId(applicationId).then((response) => {
const quotes = _.get(response, 'data.data');
this.setState({
quotes,
});
});
....
}
render() {
const quotes = _.get(this.state, 'quotes', null);
return (
<div className="application">
<h4 className="application__sub">Application</h4>
<h1 className="application__title">Quote Comparison</h1>
<div className="form-wrapper">
{this.renderQuotes(quotes)}
</div>
<div />
</div>
);
}在这里，我从API获取引用，一旦它完成，就在状态中设置一个变量，然后呈现和反应完成它们的工作。
https://stackoverflow.com/questions/45337165
复制相似问题
腾讯云开发者
