反应 redux 等待状态改变，所以我可以映射

Question

我第一次尝试 Redux，之前我一直在使用 React 及其组件状态系统。我下面的代码在其 vanilla react 组件状态下 100% 工作，但在 Redux 中不能正常工作。幸运的是，我知道问题的性质，但不知道如何解决。当我注释掉我的加载 gif 的“Spinner”时，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 {error, isLoaded, foodReducer} = this.props;” 而不是“const {error, isLoaded, foods} = this.props;”