UI 状态与 Redux 状态

Question

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

两个下拉菜单从 rest call 接收他们的选项。

例如：州和市。

根据州选择，城市下拉菜单会调用 rest 来获取城市。

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

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>