React-如何将id 2的invite属性设置为false

Question

我的目标是根据invite属性的状态更改按钮的类。我想创建一个功能，这样当你点击按钮时，它就会改变邀请的状态。

这是我的代码：

export default class Team extends Component {
constructor(props) {
super(props)
this.state = {
datas: [
{
id: 1,
image: 'https://i.pinimg.com/originals/5e/62/f1/5e62f1a8adecdeb028d6a78e6e755127.jpg',
name: 'OLAKERTAL',
role: 'Jungle, Mid',
rang: 'https://img2.gratispng.com/20180627/etk/kisspng-league-of-legends-world-of-warcraft-riot-games-gol-bronze-5b33297713b100.6997811915300796070807.jpg',
invite: true,
},
{
id: 2,
image: 'https://i.pinimg.com/originals/5e/62/f1/5e62f1a8adecdeb028d6a78e6e755127.jpg',
name: 'Ali',
role: 'Jungle, Mid',
rang: 'https://img2.gratispng.com/20180627/etk/kisspng-league-of-legends-world-of-warcraft-riot-games-gol-bronze-5b33297713b100.6997811915300796070807.jpg',
invite: true,
},
{
id: 3,
image: 'https://i.pinimg.com/originals/5e/62/f1/5e62f1a8adecdeb028d6a78e6e755127.jpg',
name: 'Saad',
role: 'Jungle, Mid',
rang: 'https://img2.gratispng.com/20180627/etk/kisspng-league-of-legends-world-of-warcraft-riot-games-gol-bronze-5b33297713b100.6997811915300796070807.jpg',
invite: true,
},
]
}
}
renderTableData() {
return this.state.datas.map((data, index) => {
let { image, name, role, rang, invite } = data 
function bouton() {
invite === true ? invite = false : invite = true
console.log(55)
}
return (
<div key={index}>
<div>
<img alt="img" src={image} />
<div>
<h4>{name}</h4>
<div>Roles : {role}</div>
</div>
<img alt="img-2" onClick={this.props.image} src={rang} />
</div>
<div>
<button className={invite === false ? "bouton-white" : "" } onClick={bouton}>Invite</button>
</div>
</div>
)
})
}
}

但他不想改变邀请的状态。我放了一个cosole.log((，看看它是否适合我的功能，它把我的console.log放得很好。但状态的变化不会改变。。。

你知道为什么它不起作用吗？

Answer 1

；bouton"；函数只是改变局部变量"；邀请"；并且与原始数据对象无关。

您需要存储"；数据"；array in state and in button Click将一个接收数据索引的函数放在datas数组中，并使用它更改状态内部的邀请(当然还有setState函数(。