UI状态与Redux状态

Question

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

两个下拉列表从rest调用中接收它们的选项。

例如:州和城市。

根据州的选择，城市下拉菜单发出获取城市的rest调用。

根据在下拉列表中所做的选择，表中的数据通过进行rest调用来更新。

react.org示例讨论了如何提升状态。因此，显示所有三个下拉列表和表格的父组件维护跟踪选择了哪个州、城市和日期以及表格中显示的数据是什么的状态。每次下拉选择更改父状态时，都会更新并重新获取新数据。此外，表数据每隔几秒钟通过发送选定的州、城市和日期进行更新。

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

Answer 1

rest是否应该调用来获取有关下拉选项的信息？

获取数据的rest调用应该只是父组件的一部分。将dropdown组件保留为纯组件是有意义的，它从父组件接收选项值作为道具。

遵循这个方法，你的dropdown组件将真正成为可重用的组件，它的唯一工作就是显示选项，并通过一个回调函数将选定的值传递回它的父组件，该回调函数被作为prop传递给dropdown组件。

我是否需要下拉菜单有自己的状态来跟踪选定的值？

不需要，您可以使用回调函数将选定的值传递回父对象。

一些代码

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>