Question

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

两个下拉菜单会从剩余呼叫中接收其选项。

例如：州和城市。

基于状态选择，城市下拉列表会进行调用以获取城市。

基于下拉菜单中的选择，表中的数据会通过调用rest进行更新。

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

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

Answer 1

其余调用是否应获取有关下拉列表的信息选项吗？

用于获取数据的rest调用应该仅是父组件的一部分。将dropdown组件保持为纯组件是很有意义的，它从其父级接收options值作为prop。

遵循此方法将使您的下拉组件真正成为可重用组件，该组件仅在作业中显示选项，并通过作为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>

UI状态与Redux状态

1 个答案: