Question

我是第一次使用Redux，之前我一直在使用React及其组件状态系统。我的以下代码在其原始React组件状态下可以100％正常工作，但不能像Redux那样正常工作。幸运的是，我知道问题的本质，但不知道如何解决。当我注释掉“ Spinner”（这是我的加载gif）时，redux会更新状态并执行操作。我进行了异步api调用，并检索了有效负载。但是，如果未注释掉'Spinner'，则它会引发类型错误和Cannot read property 'map' of undefined。我的reducer的初始状态是一个空数组，我确定所有设置都正确，但可能是我的组件代码。

class Votes extends Component {


 componentDidMount() {
   this.props.getFoods();
 }



  render() {
    const {error, isLoaded, foods} = this.props; 
    if (error) {
      return <div>Error : {error.message}</div>;
    // } else if (!isLoaded) {
    //   return <Spinner />;
    } else {
      return (
        <div>
          <h2>Menu</h2>
                    <ul>
                {foods.map(food=> (
                <li key={food._id}>
                    <div className="description">
                            <h4>{food.foodname}</h4>
                    </div> 
                </li>

                ))}

            </ul>
        </div>
      );
    }
  }
}

const mapStateToProps = state => ({
  foodReducer: state.foodReducer.foods
});

export default connect(mapStateToProps, {getfoods})(FoodComponent);

将initalState文件中的reducer放在此处：

const initialState = {
   error: null,
   isLoaded: false,
   foods: [],
}

如果旋转器被注释掉，我认为不需要提供动作，存储或缩减器，但是如果您需要查看该代码来解决此问题，我可以进行以后的编辑。谢谢。

Answer 1

在mapStateToProps中，分配了foodReducer。但是从道具中获得价值的是食物，请尝试“ foodReducer”

使用“ const {错误，已加载， foodReducer } = this.props;” 而不是“ const {错误，isLoaded，食物} = this.props;”

反应redux等待状态更改，以便我可以映射

1 个答案: