React -将父状态中的一项设置为子状态
我是一个React新手，并试图通过构建一个简单的报价生成器来学习它，其中报价是根据用户选择的情绪生成的。App组件包含state: quotes和moods (其中每个元素都是一个嵌套对象)，它的子元素是Mood组件。
现在，App组件的状态由四种情绪组成，我想要发生的是:当用户单击情绪组件中的按钮时，他/她被重定向到该情绪的页面，并且情绪组件的状态被设置为该特定情绪。
我自己设计的解决方案非常粗糙，我正在寻找一种方法让它变得更优雅/更实用。
下面是应用程序状态的moods对象：
const moods = {
mood1: {
type: 'upset',
image: 'abc.png',
},
mood2: {
type: 'unmotivated',
image: 'abc.png',
},
mood3: {
type: 'anxious',
image: 'abc.png',
},
}App组件：
state ={
moods: moods,
}
render(){
return (
<div className="Container">
<ul className='moods'>
{
Object.keys(this.state.moods).map(key => <Mood
moodsData = {this.state.moods}
key={key}
indexKey = {key}
index={this.state.moods[key].type}
details={this.state.moods[key]}
/>)
}
</ul>
</div>
);}}这是我在情绪组件中的进展情况，按钮上的onClick函数是：
handleClick = (e) => {
this.setState({moods: e.target.value});
}如果有任何建议，我将不胜感激！花了这么多时间在这上面，我感觉我的大脑再也接受不了Youtube教程/媒体文章了。
回答 1
Stack Overflow用户
发布于 2020-06-11 03:54:13
我注意到的第一件事是你试图在javascript对象上而不是数组上使用map，这在使用一些函数时可能会带来一些问题，所以我建议将它变成一个数组。
如果你只有一个情绪组件，并且基于它接收到的情绪类型改变它的样式，它实际上不需要从内部管理状态，你只需要将道具传递给情绪组件，并处理props接收到的内容。
例如：
以数组形式表示的Moods：
const moods = [
{
type: 'upset',
image: 'abc.png',
},
{
type: 'unmotivated',
image: 'abc.png',
},
{
type: 'anxious',
image: 'abc.png',
},
]我假设您从服务器或外部源获得情绪列表，这就是为什么我将情绪保持在状态中，而不是仅仅通过const情绪映射。
state ={
moods: moods,
mood:null,
}
onClick= (key) =>{
console.log(this.state.moods[key]);
this.setState({
mood:this.state.moods[key],
})
}
render(){
return (
<div className="Container">
<ul className='moods'>
{
Object.keys(this.state.moods).map((key) => <div key={key}>
<a onClick={() =>{this.onClick(key)}}>Click here to change the mood to {this.state.moods[key].type}</a>
</div>)
}
</ul>
{this.state.mood ? <Mood actualMood={this.state.mood}/> : null}
</div>
);
}而情绪组件只是获得一些道具，并根据它获得的内容显示一些东西：
class Mood extends Component
{
render()
{
console.log(this.props.actualMood.type);
return (
<div>
<p>You're looking at {this.props.actualMood.type} mood</p>
</div>
);
}
}使用react钩子可以很容易地实现这一点，但是基于类的组件需要一个棘手的解决方案，乍一看可能并不容易。
如果你想要实现的是移动到另一个组件，你可以有一个只管理状态的父组件，然后根据一个条件(如果已经选择了mood )呈现一个组件ChooseAMoodComponent或MoodComponent。
实现这一点的另一种方法是通过React Router，您可以通过URL get params传递一些参数。
但最佳实践应该是使用Redux。
https://stackoverflow.com/questions/62309218
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号