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

首先需要从数组中找出给定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}));

Answer 2

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

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

SetState不使用spread运算符

2 个答案: