реагировать на избыточность в ожидании смены состояния - PullRequest
1 голос
/ 22 февраля 2020

Я впервые пробую Redux, где ранее использовал React и его систему состояний компонентов. Мой код ниже работает на 100% в его ванильном состоянии компонента реакции, но он не работает, как это должно быть с Redux. К счастью, я знаю природу проблемы, но не знаю, как ее решить. Когда я закомментирую свой «Spinner», который является моим загрузочным GIF, Redux обновляет состояние, и действие выполняется. Мой асинхронный вызов API сделан, и полезная нагрузка получена. Но когда Spinner не закомментирован, он выдает ошибку типа и Cannot read property 'map' of undefined. Мой редуктор имеет пустой массив в качестве исходного состояния, и я уверен, что все настроено правильно, но, возможно, это мой код компонента.

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: [],
}

Я не думаю, что мне нужно предоставлять свои действия, хранить или использовать редуктор, как он работает, если закомментатор закомментирован, но если вам нужно увидеть этот код, чтобы расшифровать эту проблему, я могу внести изменения в будущем. спасибо.

1 Ответ

1 голос
/ 22 февраля 2020

В mapStateToProps, назначенном foodReducer. Но получить значение из реквизита - это еда. Попробуйте "foodReducer"

Используйте "const {error, isLoaded, foodReducer } = this.props;" вместо "const {error, isLoaded, foods } = this.props;"

...