在第二次值更改时设置 Reactjs 下拉列表 setState

Question

在以下组件中，handleDropdownChange 函数不会在第一次更改时设置“数据”的状态，它只会在第二次更改后设置它。例如，当我 select 'Electronics' 时，没有任何反应。然后我 select 'Produce'，页面加载了所有 'Electronics' 产品。

export default class ProductList extends Component {
        
    constructor(props){             
        super(props);       
        this.handleDropdownChange= this.handleDropdownChange.bind(this);
        this.state = {      
             data: fulldata
            };      
    }


    handleDropdownChange(e){
        
        e.preventDefault();
        var filtered_data = fulldata.filter(prod => prod.category == e.target.value);       
        this.setState({ data:filtered_data })
        
    }
    

   render(){

    return(
               <div>Category</div>
                        <select id="filter-cat" onChange={this.handleDropdownChange}>
                            <option value="Apparel">Apparel</option>    
                            <option value="Electronics">Electronics</option>
                            <option value="Produce">Produce</option>
                        </select>

              {this.state.data}
     );
    }
}

Answer 1

你的代码看起来不错，虽然我不完全确定你是如何呈现的 this.state.data 因为从它的外观来看它是一个数组。您可以修改 handleDropdownChange 以存储所选项目。

您所在的州：

    this.state = {
      data: fulldata[0]
    };

您的 onChange 负责人：

handleDropdownChange(e) {
  const filtered_data = fulldata.find(
    (prod) => prod.category === e.target.value
  );
  this.setState({ data: filtered_data });
}

这是工作 codesandbox example

Answer 2

唯一对我有用的东西是在这里找到的：

我更新后的方法如下所示：

async handleDropdownChange(e){
        
        e.preventDefault();
        var filtered_data = fulldata.filter(prod => prod.category == e.target.value);       
        await this.setState({ data:filtered_data })
        
    }

这感觉很糟糕，我希望有更好的方法，但目前这是唯一适合我的解决方案。

在第二次值更改时设置 Reactjs 下拉列表 setState

Reactjs dropdown setState being set on second value change

setstate

drop-down-menu

reactjs