SetState无法与传播运算符一起使用

Question

I have a language switcher in a React native app, it has the selected language ticked, which is stored in state. However this is not working, any advice appreciated. The code is as below. The selectedLanguage is being populated so it knows what needs updating but it's not updating the state object.

   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

First need to find out the right object for given selectedLanguage from an array. Use Array#map to traverse and update the matched object selected prop value with boolean true and rest to false .

const {languages} = this.state;

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

Now do setState .

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

Answer 2

The spread operator isn't going to deep compare objects in an array. You've got to either move from a languages array to a languages object, as in:

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

Or, you need to copy and replace:

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