Reactjs UI状态与Redux状态

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

两个下拉列表从rest call接收选项

州和城市

根据状态选择，“城市”下拉列表进行rest调用以获取城市

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

react.org的例子谈到提升状态。因此，显示所有三个下拉列表和表格的父组件将保持跟踪所选状态、城市和日期以及表格中显示的数据的状态。每次下拉选择更改时，父状态都会更新并重新获取新数据。 此外，表格数据每隔几秒钟通过发送选定的 州、市和日期

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

rest是否应该调用以获取有关下拉列表的信息 选择

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

遵循此方法将真正使下拉组件成为可重用组件，其唯一任务是显示选项，并通过作为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>

父组件-->
构造函数（）{
此.state={
stateOptions:null，
城市选项：空，
selectedState:null，
selectedCity:空
}
}
componentDidMount（）{
fetch.state.api=>{
这是我的国家({
stateOptions:stateDataFromApi
})
}
}
handleStateSelection=（selectedState）=>{
fetch.city.api=>{
这是我的国家({
selectedState:selectedState，
城市选项：cityDataFromApi
})
}
}
handleCitySelection=（selectedCity）=>{
这是我的国家({
selectedCity：selectedCity
})
}
..
..

如果一个HOC同时用于下拉列表，并且该HOC具有带有下拉选项的状态，该怎么办？基本上，将状态选项和城市选项移动到HOC。同时，为表组件和父组件创建一个HOC只是维护在子组件之间传递的状态？例如：当城市更改时，HOC状态更新，并且表HOC将此作为道具接收，并进行rest调用以获取新的表数据。使用您建议的方法，我只能使下拉菜单成为可重用的UI组件，但如果我想使UI+rest端点成为可使用的下拉菜单组件，该怎么办？例如，我想导入两个不同父组件中的状态下拉列表，但我不想在两个父组件中都指定rest url。“状态”下拉列表将始终知道从何处获取选项。@Neha，这同样取决于用例，如果应用程序中要使用的每个下拉列表都将从api获取其数据，则您可能希望采用HOC方法。