SetState 不与传播运算符一起使用答案

【问题标题】：SetState not working with spread operatorSetState 不与传播运算符一起使用
【发布时间】：2018-06-14 15:08:41
【问题描述】：

我在 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,
               }
           ]));
        }
    });
}

【问题讨论】：

标签： reactjs react-native ecmascript-6

【解决方案1】：

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

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;
       });
    }
});
}

【讨论】：

非常感谢您的回复。我曾尝试更改为一个对象，但无论如何很高兴知道我无法与扩展运算符进行深入比较。多亏了您的回答和其他答案，我现在可以正常工作了。
我只是想我会提到它。将扩展运算符与对象一起使用会更容易（在某些方面）。是的 - 这是我能说的真正的收获。除此之外，还有很多方法可以解决。

【解决方案2】：

首先需要从数组中找出给定selectedLanguage 的正确对象。使用Array#map 遍历并更新匹配对象selected 属性值为布尔值true，其余为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}));

【讨论】：

也非常感谢您的回复。感谢您和其他答案，我现在可以正常工作了。对于初学者，我错过了地图上的钥匙。