在Reactjs中定义每个对象的初始状态

Question

我在div中有一个对象列表，其中我有一个类似于＆＃34的可点击按钮;喜欢＆＃34;来自Facebook。如果它不喜欢它是白色的，如果它被喜欢它会变成黑色。这个过程是可逆的。我有一个商店（因此也有动作）来保存我喜欢的物品。单击按钮时，添加/删除功能正常;但是，当我刷新页面时，即使仍然保留了对象，喜欢对象的按钮也不会显示为黑色。如何为每个对象设置初始状态以识别＆＃34;它应该是什么颜色？我希望我很清楚。

Answer 1

我猜测对象的状态存储在某个地方（可能在服务器中）。

你能做的是，

componentDidMount() {

 //do an ajax GET request and extract like property out of the object like this:
 var o1 = JSON.parse(res.text)
 var liked = o1.liked //boolean

this.setState({isLiked: liked})
}

toggleLike() {

var {isLiked} = this.state

//do a POST req and toggle it to !isLiked

//and if it's a success, then 

this.setState({isLiked: !isLiked});

}

render() {

return(
<LikeButton onClick={this.toggleLike} />
)

}

希望这有帮助，如果您有任何疑问，请告诉我。