javascript - 使用 ajax 调用 react 组件 - 生命周期

Question

所以我有一个使用 React 和 Ajax 调用的有趣案例。

在上下文中，我有一个带有 3 个选项卡的 Accordion 。初始化 Accordion react 组件后，我首先打开第一个选项卡，其余选项卡关闭。每个选项卡的主体中都有所谓的 DictionaryCall 组件，如下所示:

return class DictionaryCall extends React.Component {

        constructor (props) {
            super();
            this.state = {
                word: '',
                data: [],
                error: false,
                nodata: false,
                initialLoaded: props.load
            }
        }

        componentDidMount () {
            if(this.state.initialLoaded){
                this.callAjax();
            }
        }

        componentWillReceiveProps (nextProps) {
            if(nextProps.load){
                this.setState({initialLoaded: true});
                this.callAjax();
            }
        }

        callAjax () {
            $.ajax({
                url: this.props.url,
                dataType: 'json',
                catche: false,
                method: 'POST',
                data: {word: this.props.word},
                success: function(data){
                    if(!data.length){
                        this.setState({nodata: true});
                    } else {
                        this.setState({data: data});
                    }
                }.bind(this),
                error: function(xhr, status, error){
                    console.log(this.props.url, status, error.toString());
                    this.setState({error: true});
                }.bind(this)
            });
        }

        render () {
            let body,
                error = this.state.error;

            if(this.state.nodata){
                body = <div>No definition found</div>
            } else {
                body = <DataTab data={this.state.data} title={this.props.word}/>
            }

            return (
                <div className="dictionary-call">
                    {body}
                    {error ? <ServerError onClick={this.callAjax.bind(this)}/> : null}
                </div>
            )
        }
    };

拳头根据React docs使用 props 设置初始状态是一种反模式，除非您明确指定它仅用于组件初始化。

正如在构造函数中看到的那样，我正在使用 props.load 设置 initialLoaded 状态。我将 props.load 作为 true 仅传递给第一个 Accordion 选项卡，因为我希望它最初加载。

componentDidMount 方法被调用并检查 initialLoaded 状态。如果它设置为 true，它只会调用 ajax 并重新呈现组件。

现在是棘手的一点。 componentWillReceiveProps 方法。我预计，当用户单击 Accordion 选项卡将其打开时，该组件将收到 nextProps.load。然后将 props.load 传递给具有 true 值的组件。

我的问题是，componentWillReceiveProps 是调用 this.callAjax() 的好地方吗？在这种情况下创建 initalLoaded 状态似乎毫无意义。我不应该简单地基于 props.load 并调用 shouldComponentUpdate 吗？

或者也许我应该坚持使用 initalLoaded 状态并使用 componentWillUpdate 或 componentDidUpdate。

请记住，我只想在第一次打开 Accordion 选项卡时调用一次 ajax 调用。

谢谢!

Answer 1

所以经过一番研究后，我想回答我自己的问题。希望对某人有所帮助。

解决方案非常简单明了(在我看来)。

        componentDidMount () {
            if(this.state.initialLoaded){
                this.callAjax();
            }
        }

        componentWillReceiveProps (nextProps) {
            if(nextProps.load){
                this.setState({initialLoaded: true});
            }
        }

        componentWillUpdate (nextProps, nextState) {
            if(this.state.initialLoaded !== nextState.initialLoaded) {
                this.callAjax();
            }
        }

此代码适用于组件的所有实例，无论它是第一个 Accordion 选项卡(最初打开)还是其余选项卡(最初关闭)的子项。

在 componentDidMount 方法中，我正在检查组件是否应该进行 Ajax 调用。如果在初始化期间 this.props.open 已将 this.state.initialLoaded 状态设置为 true，则会进行 ajax 调用。否则当然不行。

现在，当用户单击其他选项卡时，组件需要 componentWillReceiveProps 中的 Prop 。此处我仅在 nextProps.load 为 true 时设置状态，因为我想仅在 load 字段为 true 时加载数据。

最后，如果满足 componentWillReceiveProps 中的条件，我将检查 this.state.initialLoaded 是否已更改。因为它只能在 nextProp.load 为真时更改，所以它可以防止调用 Ajax 请求太多次(当状态从真变为假时)。

这样，我仅在选项卡首次打开或最初打开时才调用 Ajax 请求。

就这么简单!