Javascript 在React中切换嵌套状态对象

我有一个状态对象，它包含一个对象数组：

this.state = {
  feeling: [
    { name: 'alert', status: false },
    { name: 'calm', status: false },
    { name: 'creative', status: false },
    { name: 'productive', status: false },
    { name: 'relaxed', status: false },
    { name: 'sleepy', status: false },
    { name: 'uplifted', status: false }
  ]
}

我想在单击事件时将布尔值

状态

从true切换为false。我将此函数构建为单击处理程序，但它不会将事件连接到状态更改：

buttonToggle = (event) => {
  event.persist();
  const value = !event.target.value

  this.setState( prevState => ({
    status: !prevState.status
  }))
}

我很难跟踪嵌套的React状态更改的控制流，以及活动事件如何从处理程序跳转到状态对象，反之亦然

整个组成部分：

export default class StatePractice extends React.Component {

  constructor() {
    super();
    this.state = {
      feeling: [
        { name: 'alert', status: false },
        { name: 'calm', status: false },
        { name: 'creative', status: false },
        { name: 'productive', status: false },
        { name: 'relaxed', status: false },
        { name: 'sleepy', status: false },
        { name: 'uplifted', status: false }
      ]
    }
  }

  buttonToggle = (event) => {
    event.persist();
    const value = !event.target.value

    this.setState( prevState => ({
      status: !prevState.status
    }))
  }



  render() {
    return (  
      <div>
        { this.state.feeling.map(
            (stateObj, index) => { 
              return <button 
                key={ index }
                onClick={ this.buttonToggle } 
                value={ stateObj.status } >
                  { stateObj.status.toString() }
                </button>
            }
          )
        }
      </div>
    )
  }
}  

导出默认类StatePractice扩展React.Component{
构造函数（）{
超级（）；
此.state={
感觉：[
{name:'alert'，状态：false}，
{name:'calm'，状态：false}，
{name:'creative'，状态：false}，
{name:'productive'，状态：false}，
{name:'released'，状态：false}，
{name:'sleepy'，状态：false}，
{name:'uplefted'，状态：false}
]
}
}
按钮切换=（事件）=>{
event.persist（）；
常量值=！event.target.value
this.setState（prevState=>({
状态：！prevState.status
}))
}
render（）{
报税表（
{this.state.feeling.map(
（stateObj，索引）=>{
返回
{stateObj.status.toString（）}
}
)
}
)
}
}  

为了解决您的问题，您应该首先将要修改的元素的索引发送到切换函数：

onClick = {this.buttonToggle(index)} 

然后调整函数以接收索引和事件

现在，要修改状态数组，请复制它，更改要查找的值，然后将其恢复到您的状态：

buttonToggle = index => event => {
    event.persist();
    const feeling = [...this.state.feeling]; //Copy your array
    feeling[index] = !feeling[index];
    this.setState({ feeling }); 
}

---

您还可以使用

slice

复制数组，甚至直接发送一个只更改一个值的

mapped

数组。

更新react state对象中的嵌套对象很棘手。您必须从临时变量中的状态获取整个对象，更新该变量中的值，然后用更新的变量替换状态。 为此，buttonToggle函数需要知道按下了哪个按钮

return <button 
  key={ index }
  onClick={ (event) => this.buttonToggle(event, stateObj.name) } 
  value={ stateObj.status } >
    { stateObj.status.toString() }
  </button>

工作中的桥

或者，如果您不需要为每个感觉存储比“名称”和“状态”更多的数据，您可以像这样重写组件状态：

 feeling: {
    alert: false,
    calm: false,
    creative: false,
    etc...
  }

和按钮切换：

 buttonToggle = (event, name) => {
   event.persist();
   let { feeling } = this.state;
   feeling[name] = !feeling[name];
   this.setState({
    feeling
   });
 }

---

我认为您需要在获取事件时更新整个阵列。最好不要改变现有状态。我建议使用以下代码

export default class StatePractice extends React.Component {
  constructor() {
    super();
    this.state = {
      feeling: [
        { name: "alert", status: false },
        { name: "calm", status: false },
        { name: "creative", status: false },
        { name: "productive", status: false },
        { name: "relaxed", status: false },
        { name: "sleepy", status: false },
        { name: "uplifted", status: false },
      ],
    };
  }

  buttonToggle = (index, value) => (event) => {
    event.persist();
    const toUpdate = { ...this.state.feeling[index], status: !value };
    const feeling = [...this.state.feeling];
    feeling.splice(index, 1, toUpdate);
    this.setState({
      feeling,
    });
  };

  render() {
    return (
      <div>
        {this.state.feeling.map((stateObj, index) => {
          return (
            <button
              key={index}
              onClick={this.buttonToggle(index, stateObj.status)}
              value={stateObj.status}
            >
              {stateObj.status.toString()}
            </button>
          );
        })}
      </div>
    );
  }
}

导出默认类StatePractice扩展React.Component{
构造函数（）{
超级（）；
此.state={
感觉：[
{name:“警报”，状态：false}，
{姓名：“冷静”，状态：假}，
{名称：“创造性”，状态：false}，
{name:“productive”，状态：false}，
{name:“released”，状态：false}，
{name:“sleepy”，状态：false}，
{name:“已提升”，状态：false}，
],
};
}
按钮切换=（索引、值）=>（事件）=>{
event.persist（）；
constToUpdate={…this.state.feeling[index]，status:！value}；
const feeling=[…this.state.feeling]；
感觉。拼接（索引1，更新）；
这是我的国家({
感觉
});
};
render（）{
返回(
{this.state.feeling.map（（stateObj，index）=>{
返回(
{stateObj.status.toString（）}
);
})}
);
}
}

我想在单击事件时将布尔状态从true切换为false。在所有对象或特定对象中？初始状态包含对象数组，但进一步将单个对象传递到

setState

。这可能就是问题所在。@hindmost-我只想一次切换一个项目的状态-被单击的项目。因此，您将事件嵌套在buttonToggle中的另一个函数中-为什么？我将ButtonTo嵌套到return函数中，因为我想重用该项目的索引和状态值，而事件处理程序是一个函数，所以我把它们结合起来：）回答得好，欢迎来到SO。共识似乎是您必须将整个数组重写回setState。“这是一个要求吗？看起来很难执行。@staypuftman这是多余的，但目前是唯一的办法。React不能很好地处理嵌套状态。另一种方法是1。设计（更小的）反应组件来完成一个特定任务（并降低状态对象的复杂性）或2。考虑执行ReDux的反应。有趣的是，我所有的尝试都失败了，这是有道理的——我没有正确的框架。提到redux也很有趣。这一部分状态实际上现在处于一个上下文中，但看起来我已经达到了它所能做的极限。我的网站不是超级疯狂，所以我想这就可以了。再次感谢。

export default class StatePractice extends React.Component {
  constructor() {
    super();
    this.state = {
      feeling: [
        { name: "alert", status: false },
        { name: "calm", status: false },
        { name: "creative", status: false },
        { name: "productive", status: false },
        { name: "relaxed", status: false },
        { name: "sleepy", status: false },
        { name: "uplifted", status: false },
      ],
    };
  }

  buttonToggle = (index, value) => (event) => {
    event.persist();
    const toUpdate = { ...this.state.feeling[index], status: !value };
    const feeling = [...this.state.feeling];
    feeling.splice(index, 1, toUpdate);
    this.setState({
      feeling,
    });
  };

  render() {
    return (
      <div>
        {this.state.feeling.map((stateObj, index) => {
          return (
            <button
              key={index}
              onClick={this.buttonToggle(index, stateObj.status)}
              value={stateObj.status}
            >
              {stateObj.status.toString()}
            </button>
          );
        })}
      </div>
    );
  }
}