React:在状态更改时将API调用放在何处

Question

我需要对状态变化进行API调用

我应该使用哪种生命周期方法进行此API调用？

componentDidUpdate(),getDerivedStateFromProps()或任何其他？

什么是最佳做法？

Answer 1

componentDidUpdate()如果它不影响州,你应该去. getDerivedStateFromProps()改变状态,因此只有当你的状态依赖于nextProps组件将接收时才应该使用它.它不会触发您的状态修改,但可以componentDidUpdate()在极少数情况下结合使用.

下面是一个使用Redux的快速示例,表示您愿意实现的目标,省略特定操作,reducers和apis相关文件以避免任何混淆:

@connect(state => ({ searchResult: state.searchResult }))
class MassFetchingComponent extends React.Component {
    state = {
        search: '',
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.search!== this.state.search) {
            dispatch(searchAction(this.state.search));
        }
    }

    handleChange = search => this.setState({ search })

    render() {
        return (
            <div>
                <Input value={this.state.search} onChange={this.handleChange} />
                { this.props.searchResult }
            </div>
        )
    }
}

我使用输入作为示例目的,但如果您的状态快速变化,我不建议这样做.在那里使用套接字是一种选择.