javascript - 如何添加到 React 中的嵌套数组？

Question

我正在构建一个 Slack 克隆原型(prototype)。当我尝试将消息添加到数组 this.state.channels.message 时，它​​会将其添加为数组 channel 中的新对象:

期望的结果

class App extends React.Component {
state = {
    channels : [
        { id: 1, name: 'react', messages: ['React message 1', '**DESIRED MESSAGE**']},
        { id: 2, name: 'react-router', messages: ['react-router message 1']},
    ],

目前的结果

class App extends React.Component {
state = {
    channels : [
        { id: 1, name: 'react', messages: ['React message 1']},
        { id: 2, name: 'react-router', messages: ['react-router message 1']},
        { id: 1, messages: '**DESIRED MESSAGE**'}
    ],

更新组件状态的逻辑

handleSentMessage = (value) => {
    const {selectedChannelId, selectedPersonId, channels} = this.state;

    if(this.state.selectedChannelId) {
      this.setState({
        ...this.state,
          channels: [
            ...this.state.channels,
            this.state.channels[selectedChannelId-1].messages.push(value)
          ]
        }
      );
    }

    if(this.state.selectedPersonId) {
      this.setState({
        ...this.state,
          people: [
            ...this.state.people,
            this.state.people[selectedPersonId-1].messages.push(value)
          ]
        }
      );
    }
}

任何帮助将不胜感激! Github https://github.com/kingdomwilks/Slack2

Answer 1

你传播channels不正确，因为第二个语句不会覆盖任何东西(它是一个array而不是object)。当 channel 的 index 等于 selectedChannelId - 1

this.setState(prevState =>({
    channels : prevState.channels.map((channel,i) =>{
        if(i === selectedChannelId -1) return {
            ...channel,
            messages: channel.messages.concat('foo') //Now you overwrite it
        }

        return channel
    })
}))

您也可以直接使用 id 来找到正确的 channel，这样您就不再需要 selectedChannelId - 1，只需 selectedChannelId