Javascript 在React中处理复杂的数据结构

我是REACTE的新手，我想知道是否有人能帮我解决这个问题。 我有一个像slack这样的应用程序，在那里我可以添加一个新团队和一个频道。 问题是，这是一个复杂的DS，我一直在尝试使用通过输入传递的新数据（在团队和通道中）修改状态，但我没有成功

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newTeamValue: "",
      teams: [
        {
          newChannel: "",
          name: "Team1",
          channels: [ 
            {
              name: "Channel1",
              index: 1
            },
            {
              name: "Channel2",
              index: 2
            }
          ]
        }
      ]
    };
    this.addTeam = this.addTeam.bind(this)

    this.addChannel = this.addChannel.bind(this)
  }

  addTeam(e) {
    e.preventDefault();
    this.setState(prevState => ({
      newTeam: "",
      teams: [
        ...prevState.teams,
        {
          name: this.state.newTeam,
          channels: []
        }
      ]
    }));
  }

  addChannel(e){
    e.preventDefault()
    this.setState(prevState => ({
      newChannel:"",
      teams: [
        ...prevState.teams,
        {
          channels: [...prevState, {
            name: this.state.teams.newChannel
          }]
        }
      ]
    }))
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.teams.map(team => {
            return (
              <div>
                <li>{team.name}</li>
                <input onChange={e => this.setState({ newChannel: e.target.value })} value={this.state.newChannel} />
                <button onClick={this.addChannel}>Add New Channel</button>
                <ul>
                  {team.channels.map(channel => {
                    return (
                      <div>
                        <h2>{channel.name}</h2>
                      </div>
                    );
                  })}
                </ul>
              </div>
            );
          })}
        </ul>
        <input onChange={e => this.setState({ newTeam: e.target.value })} value={this.state.newTeam} />
        <button onClick={this.addTeam}>Add new Team</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

import React，{Component}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
新值：“”，
小组：[
{
新频道：“，
名称：“团队1”，
频道：[
{
名称：“信道1”，
索引：1
},
{
名称：“频道2”，
索引：2
}
]
}
]
};
this.addTeam=this.addTeam.bind（this）
this.addChannel=this.addChannel.bind（this）
}
ADD团队（e）{
e、 预防默认值（）；
this.setState（prevState=>({
新团队：“，
小组：[
…国家队，
{
名称：this.state.newTeam，
频道：[]
}
]
}));
}
添加频道（e）{
e、 预防默认值（）
this.setState（prevState=>({
新频道：“，
小组：[
…国家队，
{
频道：[…prevState{
名称：this.state.teams.newChannel
}]
}
]
}))
}
render（）{
返回(

{this.state.teams.map（team=>{
返回(
{team.name}
this.setState（{newChannel:e.target.value}）value={this.state.newChannel}/>
添加新频道

{team.channels.map（channel=>{
返回(
{channel.name}
);
})}

);
})}

this.setState（{newTeam:e.target.value}）value={this.state.newTeam}/>
添加新团队
);
}
}
render（，document.getElementById（“根”））；

类似的东西可能会有所帮助

const newTeams=[…this.state.teams，{name:“Team3”，频道：[]]
this.setState（{teams:newTeams}）；

newTeams

是一个数组，它包含所有现有团队（

…this.state.teams

），以及一个名为

Team3

的额外团队

有些库（如）可能对您有用。我个人不经常使用它们，因此我无法为您提供exmaple，但可能是值得关注的东西

编辑： 你提到你是新手，不确定你是否也是新手。如果您以前没有看过

…

，那么它就是

编辑2： 请回复您对向现有团队添加频道的评论

const newTeams=[
…这个州的团队，
{
名称：“团队123”，
频道：[
…this.state.Team123.channels，
{名称：“新频道”，索引：123}
]
}
];
this.setState（{team:newTeams}）；

什么不起作用？我不太清楚如何将数据从输入发送到状态，并更新它您的问题不清楚，应该集中在您遇到的一个特定问题上。话虽如此，这里有很多好问题可以帮助你开始，并不是说它们现在都相关，但它们都是我每天在堆栈溢出上看到的常见问题。嗨，我用一种新的方法编辑了我的答案，现在看起来稍微好一点。我可以添加新的团队，但当我尝试添加新频道时，出现如下错误prevState.concat不是函数，我如何才能将频道添加到嵌套的对象数组？@Khris_Al我编辑了我的答案以显示添加频道刚刚看到您的OP编辑-您将希望传播

prevState.teams..channels

，不是整个

prevState

对不起，蒂姆，但是我不清楚你的答案，你能解释一下吗？我没有在方法上使用变量，只是在对象上使用变量，所以你在之前的回答中所说的话很混乱。