设置状态与传播运算符不起作用

Question

我在 React 原生应用程序中有一个语言切换器，它勾选了所选语言，该语言存储在状态中。然而，这是行不通的，任何建议都值得赞赏。代码如下。正在填充selectedLanguage，因此它知道需要更新的内容，但不更新状态对象。

constructor(props) {
super(props);
this.state = {
languages: [
{
language: 'Dutch',
selected: false,
},
{
language: 'English',
selected: true,
},
{
language: 'French',
selected: false,
},
{
language: 'German',
selected: false,
},
{
language: 'Polish',
selected: false,
}
],
};
};
changeLanguage(selectedLanguage){
this.state.languages.map((language) => {
if(language.language === selectedLanguage){
this.setState(prevState => ([
...prevState.languages, {
language: selectedLanguage,
selected: true,
}
]));
}
});
}

Answer 1

spread 运算符不会深入比较数组中的对象。您必须从语言数组移动到语言对象，如下所示：

languages: {
Dutch: false,
English: true,
...
}

或者，您需要复制和替换：

changeLanguage(selectedLanguage){
this.state.languages.map((language, index) => {
if(language.language === selectedLanguage){
this.setState(prevState => {
const newLangs = [...prevState.languages];
newLangs[index].selected = true;
return newLangs;
});
}
});
}

Answer 2

首先需要从数组中找出给定selectedLanguage的正确对象。 使用Array#map遍历和更新匹配的对象selectedprop 值，并带有布尔true和 rest 以false。

const {languages} = this.state;
const updatedLang = languages.map((lang, key) => {
if (lang.language == selectedLanguage) {
lang.selected = true;
} else {
lang.selected = false;
}
return lang;
})

现在做setState.

this.setState(prevState => ({languages: updatedLang}));