Question

我有一个多选下拉列表。每当我选择一个选项时，我需要将该数据添加到状态。当我点击第一个选项时，我得到像

这样的数据

[{id:"1", name:"Ind"}]

当我点击第二个选项时，我得到的数据（目前选择了两个选项）

[{id:"1", name:"Ind"}, {id:"2", name:"Aus"}]

this.state = {
    selectedCountries: []
};

在多选的onChange中我调用下面的函数

handleChange = (options) => {
    var output = [];
    if(options !== null && options !== undefined){
        console.log(options); //    [{id:"1", name:"Ind"}, {id:"2", name:"Aus"}]
        this.setState(prevState => {
            selectedCountries:options
        });
    }
};

它不起作用。

我期待它像这样

selectedCountries:[
    {
        id:"1",
        name:"Ind"
    },
    {
        id:"2",
        name:"Aus"
    }
]

如何通过reactjs实现这一目标？

Answer 1

您的setState语法不正确

    this.setState({
        selectedCountries:options
    });

只有在需要根据以前的状态更新状态时才需要使用updater功能，在这种情况下，你需要从updater函数中返回一个你不做的事情

看起来像

    const newlyAddedOption = {id:"3", name:"UK"}
    this.setState(prevState => {
        return { selectedCountries:[...prevState.selectedCountries, newlyAddedOption]}
    });

或

    const newlyAddedOption = {id:"3", name:"UK"}
    this.setState(prevState => ({
        selectedCountries: [...prevState.selectedCountries, newlyAddedOption]
    }));

然而，由于您可以同时获得所有选项，因此目前对您没有用。

更新反应js状态的json数组

1 个答案: