Javascript 将对象从阵列移动到阵列中的另一个对象时镜像位置

当我调用

createTodo

函数时，

this.state.todo

被添加到新的todo中。具有

time

属性的对象希望移动到对象

select

中的

times

数组中，但

times

会加倍。 我认为应该归咎于.slice方法和复制数组。如何避开它

待办事项

class Todo extends Component {

  render() {
    return (
       <li>
        <div>
          {this.props.todo.description}
        </div>
      </li>
    )
  }
}

演示

加载组件时，它应该是：

selectTodo:{“times”：[{'time'：'00:00:40'}，{'time'：'00:00:50'}]，“description:“yty”，“id”：3，“title:“gfgfgf”}

第一次点击按钮：->

selectTodo:{times:[{time:“00:00:40”}{time:“00:00:50”}{time:“00:00:10”}{time:“00:00:20”}{time:“00:00:30”}title:“gfgfgf”]，“description:“yty”，“id:”3，“title:“gfgfgfgfgf”}

---

第二次点击按钮更改->

选择TODO:{times:[{time:'00:00:40}{time:'00:00:50}{time:'00:00:10}{time:'00:00:20}{time:'00:00:30}，{time:'00:00:30}标题：“gfgfgfgf”][description:“ytyty”，“id”：3，“title:”gfgfgfgfgfgf}

据我所知，您希望分别维护

todo

和

selectTodo

，但始终将所有

todo

时间镜像到

selectTodo.times

总而言之：

组件状态在构造函数中设置

组件安装

当用户创建todo时

如果这是第一次，现有的

todo

将镜像到

selectTodo.times

将新的待办事项推送到

todo

，然后

选择todo.times

为了知道用户是否已经使用了

createTodo

方法，我刚刚将

withInitialTodos

添加到状态。它不是很干净，但它能满足你的需要

请注意，正如Bergi在上面的评论中所说，您应该避免在

render

方法中更新状态

constructor（）{
超级（）；
此.state={
withInitialTodos:true，
待办事项：[
{
时间：“00:00:10”，
描述：“你好”
},
{
时间：“00:00:20”，
描述：“世界”
}
],
待办事项：{
“时间”：“00:00:30”，
“说明”：“W”
},
选择待办事项：{
“时报”：[{'time'：'00:00:40'}，{'time'：'00:00:50'}]，
“说明”：“YTY”，
“id”：3，
“标题”：“GFGF”
}
};
}
createTodo=（todo）=>{
这是我的国家({
withInitialTodos:false，
todos:[].concat（this.state.todos，this.state.todo），
选择待办事项：{
…this.state.selectTodo，
泰晤士报：[]康卡特(
this.state.selectTodo.times，
this.state.withInitialTodos？this.state.todos.map（（{time}）=>（{time}））：[]，
{
时间：this.state.todo.time
}
)
}
});
}
render（）{
console.log（this.state.todos）；
console.log（this.state.selectTodo.times）；
返回(

{this.state.todos.map（（todo，index）=>(
)}

);
}

您给出的预期效果示例中没有错误吗？@dashzako。没有错误。我认为问题在于方法切片（复制新数组）@Dashzako你删除了你的答案吗？是的，我想我遗漏了什么。如果你在不清空它的情况下按下

TODO

，它的值将总是被推到

时间

，这是意料之中的。你能澄清一下TODO是应该持续还是可以在每次

添加TODO

调用之间清空吗？@Dashzako你能创建一个ny示例？我想看看它在加载组件时是如何工作的。它应该是：selectTodo:{“times”：[{“time”：“00:00:40'}，{“time”：“00:00:50'}]，“description”：“ytytyty”，“id”：3，“title”：“gfgfgf”}按按钮更改-->selectTodo:{times:[{time:“00:00:40”}{time:“00:00:50”}{time:“00:00:10”}{time:“00:00:20”}{time:“00:00:30”}标题：“gfgfgf”]，“description:“ytytyty”，“id:”3，“title:“gfgfgf”}啊，所以如果按下按钮，你只想添加

todos

。然后我会在状态中使用一种切换，我会更新答案。是的。我单击另一个按钮更改->选择todo:{times:[{time:'00:00:40}{time:'00:00:50}{time:'00:00:10}{time:'00:00:20}{time'：'00:00:30}，{time:“00:00:30”}title:“gfgfgf”]“description:“yty”，“id”：3，“title:“gfgfgf”}每次单击都会添加另一个待办事项

class App extends React.Component {
  constructor() {
    super();

    this.state = {

      todos: [
        {
          time: '00:00:10',
          description: 'Hello'
        },
        {
          time: '00:00:20',
          description: 'World'
        }
       ],
      todo: {
        'time': '00:00:30',
        'description': 'W'
      },
      select: {
        "times": [{ 'time': '00:00:40' }, { 'time': '00:00:50' }],
        "description": " ytytyty",
        "id": 3,
        "title": "gfgfgfgfgf"
      }
     };
  }



  addTodo = (todo) => {
    const news = this.state.todos.slice();
    news.push(this.state.todo);
    this.setState({ todos: news });
  };


  render() {

    this.state.todos.forEach(t => {
      if (t.time) this.state.select.times.push({
        time: t.time
      })
    });

    console.log(this.state.todos);
    console.log(this.state.select);

    return (
      <div>
        <ul>
          {
            this.state.todos
              .map((todo, index) =>
                <Todo
                  key={index}
                  index={index}
                  todo={todo}
                />
              )
          }
        </ul>
        <button onClick={this.createTodo}>button</button>
      </div>
    );
  }

console.log(this.state.select) -> return-->

times: [
 {time: "00:00:40"}
 {time: "00:00:50"}
 {time: "00:00:10"} //repeat
 {time: "00:00:20"} //repeat
 {time: "00:00:10"}
 {time: "00:00:20"}
 {time: "00:00:30"}
 title: "gfgfgfgfgf"
]

times: [
     {time: "00:00:40"}
     {time: "00:00:50"}
     {time: "00:00:10"}
     {time: "00:00:20"}
     {time: "00:00:30"}
     title: "gfgfgfgfgf"
    ]