reactjs - 映射父级时更新嵌套数组内的状态

Question

我正在尝试使用映射函数和扩展运算符更新嵌套数组中的状态，但我不明白如何获取键/值对中的键来选择嵌套对象。代码中有一个箭头到有问题的部分。

export default class ControlPanel extends Component {
  state = {
    words: 
    [
      { 
        word: "a",
        id: 1,
        column: 1,
        synonymns: {
          all:[],
          selected:[],
          noneFound: false
        }
      }
    ]
  }
}

updateSynonymnState = (wordId, theSynonymns) => {
  const { words } = this.state

  const newWords = words.map(word => {
    if(word.id == wordId){
      return {...word, synonymns.all: theSynonymns} //<--- synonymns.all is throwing an error, but that is the key that i need.
    } else {
      return word
    } 
  })

  this.setState ({words: newWords})
}

我可以从一开始就映射同义词，但随后我会丢失我需要选择正确单词的单词的 Id..

如何synonymns.all = theSynonymns在该 words.map 函数中进行设置，或者在映射父参数时我应该能够以不同的方式设置嵌套的键/值对吗？

标签： reactjs

Answer 1

synonymns你也必须在里面传播word。这是执行此操作的示例语法：

const words = [{
  word: "a",
  id: 1,
  column: 1,
  synonymns: {
    all: [],
    selected: [],
    noneFound: false
  }
}]

const theSynonymns = ['b'];

const newWords = words.map(word => {
  return {
    ...word,
    synonymns: {
    	...word.synonymns,
      all: theSynonymns
    }
  }
})




console.log(newWords)