当我调用createTodo
函数时,this.state.todos
被添加到新的待办事项中。具有 time
属性的对象想要移动到对象 select
中的 times
数组,但是 times
被加倍。
我认为问题在于 .slice 方法和复制数组。如何解决这个问题?
待办事项
class Todo extends Component {
render() {
return (
<li>
<div>
{this.props.todo.description}
</div>
</li>
)
}
}
应用程序
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"
]
演示 https://stackblitz.com/edit/react-jfkwnu
当组件加载时,它应该是: selectTodo: {"times": [{'time': '00: 00: 40 '}, {' time ':' 00: 00: 50 '} ]、“描述”:“ytytyty”、“id”:3、“标题”:“gfgfgfgfgf”}
首次点击按钮:-> selectTodo: {times: [{time: "00:00:40"} {time: "00:00:50"} {time: "00:00:10"} {时间:"00:00:20"} {时间:"00:00:30"} 标题:"gfgfgfgfgf"],"描述":"ytytyty","id":3,"标题":"gfgfgfgfgf “}
第二次单击按钮更改 -> selectTodo: {times: [{time: "00:00:40"} {time: "00:00:50"} {time: "00:00:10"} {时间:"00:00:20"} {'时间':'00:00:30'}, {时间:"00:00:30"}标题:"gfgfgfgfgf"]"描述":"ytytyty",“id”:3,“标题”:“gfgfgfgfgf”}
最佳答案
据我了解,您希望独立维护 todos
和 selectTodo
,但始终将所有 todos
时间镜像到 selectTodo.times
.
总结一下:
- 组件状态在构造函数中设置
- 组件安装
- 当用户创建待办事项时
- 如果这是第一次,现有的
todos
将镜像到selectTodo.times
- 将新待办事项推送到
todos
和selectTodo.times
。
- 如果这是第一次,现有的
为了了解用户是否已经使用了 createTodo
方法,我刚刚将 withInitialTodos
添加到状态中。它并不是很干净,但它可以满足您的需要。
请注意,正如 Bergi 在上面的评论中所说,您应该避免在 render
方法中更新状态。
constructor() {
super();
this.state = {
withInitialTodos: true,
todos: [
{
time: '00:00:10',
description: 'Hello'
},
{
time: '00:00:20',
description: 'World'
}
],
todo: {
'time': '00:00:30',
'description': 'W'
},
selectTodo: {
"times": [{ 'time': '00:00:40' }, { 'time': '00:00:50' }],
"description": " ytytyty",
"id": 3,
"title": "gfgfgfgfgf"
}
};
}
createTodo = (todo) => {
this.setState({
withInitialTodos: false,
todos: [].concat(this.state.todos, this.state.todo),
selectTodo: {
...this.state.selectTodo,
times: [].concat(
this.state.selectTodo.times,
this.state.withInitialTodos ? this.state.todos.map(({ time }) => ({ time })): [],
{
time: this.state.todo.time
}
)
}
});
}
render() {
console.log(this.state.todos);
console.log(this.state.selectTodo.times);
return (
<div>
<ul>
{this.state.todos.map((todo, index) => (
<Todo
key={index}
index={index}
todo={todo}
/>
)}
</ul>
<button onClick={this.createTodo}></button>
</div>
);
}
关于javascript - 在 React 中将对象从数组移动到数组到另一个对象时镜像位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56577014/