почему этот компонент работает только при запуске, но не при нажатии кнопки

Question

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

Когда достигаются точки останова, я наводлю курсор над {toasts.map(toast => { и размер массива равен нулю.Но когда я нажимаю кнопку, точки останова даже не достигают

Любой иде?

ОБНОВЛЕНИЕ

У меня есть этот configureStore.js

import { combineReducers } from "redux";
import { createStore, applyMiddleware, compose } from "redux";
import { forbiddenWordsMiddleware } from "../middleware";
import  ToastsReducer from '../reducers/ToastsReducer';
import  RootReducer from '../reducers/RootReducer';

const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const reducers = {
     toastsReducer: ToastsReducer,
     rootReducer: RootReducer
  };

  const reduce = combineReducers({
    ...reducers,
  });

const store = createStore(
    reduce,
    storeEnhancers(applyMiddleware(forbiddenWordsMiddleware))
);
export default store;

RootReducer.js

import { ADD_ARTICLE } from "../constants/action-types";
import { FOUND_BAD_WORD } from "../constants/action-types";

const initialState = {
  articles: []
};
export default function reducer(state = initialState, action) {
  if (action.type === ADD_ARTICLE) {
    return Object.assign({}, state, {
      articles: state.articles.concat(action.payload)
    });
  }

  if (action.type === FOUND_BAD_WORD) {
    //return Object.assign({}, state, {
    //  articles: state.articles.concat(action.payload)
    // });
  }
  return state;
}

ToastsReducer.js

import { ADD_TOAST, REMOVE_TOAST } from "../constants/action-types";

const initialState = {
  toastList: []
};

export default function toasts(state = initialState, action) {
  const { payload, type } = action;

  switch (type) {
    case ADD_TOAST:
      return [payload, state.toastList];

    case REMOVE_TOAST:
      return state.toastList.filter(toast => toast.id !== payload);

    default:
      return state;
  }
}

ОБНОВЛЕНИЕ

Изображение, показывающее RootReducer.jsx и Toasts.jsx, когда я нажимаю кнопку два раза,

Toast.js

import PropTypes from "prop-types";
import React, { Component } from "react";

class Toast extends Component {
  render() {
    return (
      <li className="toast" style={{ backgroundColor: this.props.color }}>
        <p className="toast__content">
          {this.props.text}
        </p>
        <button className="toast__dismiss" onClick={this.props.onDismissClick}>
          x
        </button>
      </li>
    );
  }

  shouldComponentUpdate() {
    return false;
  }
}

Toast.propTypes = {
  color: PropTypes.string.isRequired,
  onDismissClick: PropTypes.func.isRequired,
  text: PropTypes.string.isRequired
};

export default Toast;

Answer 1

Пожалуйста, поделитесь своим кодом редуктора.Скорее всего, вы не установили начальное состояние для toastList в редукторе или произошла ошибка с toastsReducer.toastList.

Попробуйте следующее:

• Измените строку 34 на toasts: state.toastsReducer
• Прокомментируйте строки от 10 до 19 и вставьте следующее, чтобы тосты были массивом..

console.log(toasts);
console.log(toasts.toastList);
return null;

Если оба значения не определены, то возвращаемое редуктором значение неверно.

В ToastsReducer.js:

Измените следующее:

 case ADD_TOAST:
      return [ ...state.toastList, payload]; //<--- Here

Когда вы возвращаете [payload, state.toastList], он добавляет другой массив в toastList.

Запустите следующее, чтобы увидеть:

toastList = ['abc'];

// Right way to add an item to an array.
toastList = [...toastList, 'def'];

console.log(toastList);
console.log('-----');
// Adds an array to the array. Incorrect way.
toastList = [toastList, 'ghi'];

console.log(toastList);

--- ОБНОВЛЕНИЕ ---

Измените свой случай ADD_TOAST на:

return { toastList: [...state.toastList, payload] };

, и вы должны идти.

Answer 2

Просто проверьте, что ваш toasts массив содержит данные,

{toasts && toasts.length > 0 ? toasts.map(toast => {...}) : null}