UI状态与Redux状态

Question

所以我的应用程序有3个下拉菜单，一个分页组件和一个表。

两个下拉菜单从休息电话中获得选项。

例如：州和市。

根据州选择，城市下拉休息呼叫取城。

根据下拉列表中的选择，表中的数据通过进行休息调用来更新。

react.org示例讨论了解决状态问题。因此，显示所有三个下拉列表和表格的父组件保持跟踪选择状态，城市和日期以及表格中显示的数据的状态。每次下拉选择更改父状态更新并重新获取新数据。此外，表格数据通过发送选定的州，城市和日期每隔几秒更新一次。

我有的问题是，其余的调用应该在父组件或相应的下拉组件中获取有关下拉选项的信息，以便我可以重用其他页面中的下拉菜单并且我是否需要下拉列表以具有自己的状态到跟踪所选值是什么？

Answer 1

其他人是否应该致电获取有关下拉选项的信息？

其余的获取数据的调用应该只是父组件的一部分。将下拉组件保持为纯组件是有意义的，该组件从其父级接收选项值作为道具。

遵循此方法将使您的下拉组件成为可重用组件，只有作业显示选项并通过作为prop传递给下拉组件的回调函数将所选值传回给它的父级。

我是否需要下拉列表以拥有自己的状态来跟踪所选值？

不，您可以使用回调函数将所选值传递回父级。

一些代码

Parent Component -->

constructor(){
    this.state = {
        stateOptions: null,
        cityOptions: null,
        selectedState: null,
        selectedCity: null 
    }
}
componentDidMount(){
    fetch.state.api => {
        this.setState({
            stateOptions: stateDataFromApi
        })
    }
}

handleStateSelection = (selectedState) => {
    fetch.city.api => {
        this.setState({
            selectedState: selectedState,
            cityOptions: cityDataFromApi
        })
    }
}

handleCitySelection = (selectedCity) => {
    this.setState({
        selectedCity: selectedCity
    })
}


<div className="parentComponent">
    <Dropdown 
        type="state" 
        handleStateSelection="this.handleStateSelection"
        data={this.state.stateOptions}
    />
    <Dropdown 
        type="city" 
        handleStateSelection="this.handleCitySelection"
        data={this.state.cityOptions}
    />
    <Table data={this.tableData} />
    ..
    ..
</div>