React - 将父状态中的一项设置为子状态

Question

我是一名 React 新手，并试图通过构建一个简单的报价生成器来学习它，其中根据用户选择的心情生成报价。 App 组件保存状态：引号和情绪（其中每个元素都是嵌套对象），其子组件是 Mood 组件。

现在，App 组件的状态由四种心情组成，我希望发生的是：当用户单击 Mood 组件内的按钮时，他/她将被重定向到该心情的页面，并且 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>
  );}}

这就是我在 Mood 组件中的深入程度，按钮上的 onClick 函数是：

handleClick = (e) => {
this.setState({moods: e.target.value});
}

我将不胜感激任何指示/建议！花了这么多小时，我觉得我的大脑不再接受任何 Youtube 教程/媒体文章。

Answer 1

嗯，我注意到的第一件事是您试图在 javascript 对象上使用 map 而不是数组，这在使用某些函数时可能会带来一些问题，所以我建议将其设为数组。

如果你只有一个 Mood 组件并且根据它接收到的心情类型改变它的样式，它实际上不需要从内部管理状态，你可以将 props 传递给 Mood 组件并解决 props 接收到的内容.

例如：

情绪作为一个数组：

const moods = [
  {
      type: 'upset',
      image: 'abc.png',
  },
  {
      type: 'unmotivated',
      image: 'abc.png',
  },
  {
      type: 'anxious',
      image: 'abc.png',
  },
]

我假设您从服务器或外部来源获取 Mood 列表，所以这就是为什么我将情绪保持在状态而不是仅通过 const moods 进行映射。

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>
    );
  }

Mood 组件只是获取一些道具并根据它获取的内容显示一些内容：

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 hooks 轻松实现，但基于类的组件需要一个棘手的解决方案，乍一看可能并不容易。

如果你想要实现的是移动到另一个组件，你可以有一个只管理状态的父组件，然后根据一个条件（如果已经选择了心情）渲染一个组件，选择AMoodComponent 或 MoodComponent。

实现此目的的另一种方法是通过 React Router，您可以通过 URL get params 传递一些参数。

但最佳实践应该是使用 Redux。