Question

我有一个组件，可以从两个或三个API接收新闻列表。组件首次渲染时，将调用api，并在componentDidMount中渲染数据像这样的东西：

componentDidMount() {
        this.state.platforms.forEach((platform, i) => {
            let objToSend = {
                phrase: this.props.searchParams.phrase,
                // this is the main place when input data changes
                ...this.props.searchParams.general_params,
                ...this.props.searchParams.platforms[i].api_params,
                stringPath: platform,
                apiPath: this.props.searchParams.platforms[i].apiPath,
            }
            this.props.loadData(objToSend)
            // this is the api call using redux which sends data as props to this component
 }

新的短语更改时，我希望此组件重新呈现并重新运行componentDidMount，但是它不起作用，因为componentDidMount将运行一次。因此，我使用componentDidUpdate，但是由于调用次数众多，因此api仍在不断更新。

每次更改短语时如何重新渲染组件并重新运行componentDidMount

Answer 1

您可以使用componentDidUpdate个参数（previousProps，previousState）来检查是否发生了一些新的更改。

示例

componentDidUpdate(previousProps, previousState) {
    if (previousProps.phrase !== this.props.phrase) {
        //Do whatever needs to happen!
    }
}

我以这种方式停止了无限循环。

Answer 2

这是重新渲染{ "id": "date", "params": { "query_string": "*", "since": "2018-07-23" } }的一种方法。

something()

实时示例here。

React在componentDidUpdate中获取新数据

2 个答案: