Question

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

现在，App组件的状态由四种心情组成，我想发生的事情是：当用户单击Mood组件内的按钮时，他/她将重定向到该心情的页面，而Mood组件的状态为设置为特定的心情。

我自己制定的解决方案非常粗糙，我正在寻找一种使它更优雅/更实用的方法。

以下是情绪对象，它是应用程序的状态：

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组件，并且根据接收到的心情类型更改其样式，则实际上并不需要从内部管理状态，您只需将道具传递给Mood组件并解决道具收到的内容

例如：

作为数组的心情：

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

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

如果要实现的目标是转移到另一个组件，则可以有一个仅管理状态的父组件，然后根据条件（如果已选择心情）渲染一个组件ChooseAMoodComponent或MoodComponent。

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

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

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

1 个答案: