不能在 React 状态下翻转布尔值，它只更改一次？

Question

嗨，我在翻转这个该死的bool时遇到了一些麻烦。我正试图通过单击按钮将completed的值从true更改为false。它改变了一次，但永远不会回头，任何帮助都将不胜感激。

var list = [
{ item: "do the washing", id: 1, completed: true },
{ item: "lose at poker all day", id: 2, completed: true },
{ item: "coded enough?", id: 3, completed: false }
];

我写了一个handleClick函数来翻转bool，但它似乎只翻转了一次？

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: list
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(id) {
this.setState((prevState) => {
let available = prevState.data.map((a) => {
if (a.id === id) {
a.completed = !a.completed;
console.log(a.completed);
}
return a;
});
return { data: available };
});
}
render() {
let newList = list.map((a) => (
<ListItem data={a} key={a.id} handleClick={this.handleClick} />
));
return <div>{newList}</div>;
}
}

如果这有助于我的"<ListItem"看起来像

function ListItem(props) {
return (
<div>
<p>
<input
type="checkbox"
onClick={() => props.handleClick(props.data.id)}
/>{" "}
{props.data.completed ? props.data.item : null}
</p>
</div>
);
}

如有任何帮助，我们将不胜感激。

Answer 1

您似乎不是在遍历状态，而是在遍历道具。更改您的退货声明，改为：

let newList = this.state.data.map((a) => (
<ListItem data={a} key={a.id} handleClick={this.handleClick} />
));

编辑

对不起，你说得对。我建议您更改handleClick功能。下面是一个正确工作的例子：

https://codesandbox.io/s/empty-frog-r51gs?file=/src/App.js

Answer 2

首先，您的handleClick不应该突变为prevState。相反，创建一个副本并对其进行变异。

我建议你的handleClick是这样的：

handleClick(id){
this.setState(prevState=>{
let available = prevState.data.map(a=>{
// in this case you create a new object but 
// you overwrite completed value in the new object
if(a.id === id) return {...a, completed:!a.completed}
return {...a}
})
})
}