Question

想象一个带有<select>元素的简单React组件，该组件允许根据国家/地区选择城市。例如

<MyCitySelectComponent
  country={ 'France' }
  city={ 'Paris' }
  onChange={ someFunction }
/>

安装后，它应加载可用城市列表（基于国家/地区）并渲染<select>。
更改城市属性时-应该修改<select>输入值并触发onChange事件。
更改国家/地区属性（通过父级组件）时-应从远程服务器重新加载可用城市列表，并触发相同的onChange事件。

我设法实现了前两个，这是简化的代码：

class MyCitySelectComponent extends Component {
    constructor(props) {
        super(...props);

        this.state = {
            cities: null,
            city: props.city,
            country: props.country
        };
    }

    onCityChange( e ) {
        this.setState({
            city: e.target.value
        });

        this.props.onChange( e.target.value );
    }

    loadCities() {
        fetch({
            path: '/get/cities?country=' + this.state.country,
        }).then( cities => {
            this.setState({
                cities: cities
            });
        });
    }

    componentDidMount() {
        this.loadCities();
    }

    render() {
        if ( !this.state.cities ) {
            // not loaded yet
            return null;
        }

        return (
            <select>
                { this.state.cities.map( ( name, index ) =>
                    <option
                        value={ name }
                        onChange={ this.onCityChange }
                        selected={ name === this.state.city }
                    />
                ) }
            </select>
        )
    }
}

但是当从上级组件动态更改国家/地区时，我在重新加载城市时遇到麻烦。我尝试使用shouldComponentUpdate，但得到的只是无限循环。

这种类型的组件有任何模式吗？

谢谢。

Answer 1

应根据componentDidUpdate或getDerivedStateFromProps处理基于道具更改来获取新数据。查看示例文档：https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-props-change

请注意，componentWillReceiveProps已过时！

React Component-多次重载数据

1 个答案: