реквизиты не определены, несмотря на установку в магазине

Question

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

Прежде всего, это мой родительский компонент App.jsx:

import React, { Component } from 'react';

import PersonsComponent from './containers/PersonsComponent';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ol>
          <li>Turn this app into one which does NOT use local state (in components) but instead uses Redux</li>
        </ol>
        <PersonsComponent />
      </div>
    );
  }
}

export default App;

Компонент person (PersonsComponent.jsx) изображается как ниже:

import React, { Component } from "react";

import Person from "../components/Person/Person";
import AddPerson from "../components/AddPerson/AddPerson";

class PersonsComponent extends Component {

  render() {
    const { prs, personAddedHandler, personDeletedHandler } = this.props;
    return (
      <div>
        <AddPerson personAdded={() => personAddedHandler(prs)} />
        {prs.map(person => (
          <Person
            key={person.id}
            name={person.name}
            age={person.age}
            clicked={() => personDeletedHandler(prs, person.id)}
          />
        ))}
      </div>
    );
  }
}

export default PersonsComponent;

PersonComponent контейнер (PersonsContainer.jsx) , который содержит свои реквизиты, такие как редуктор prs , что означает заданный человек и действия диспетчера personAddedHandler и personDeletedHandler :

import actions from './actions';
import { connect } from "react-redux";
import PersonsComponent from './PersonsComponent';

const mapStateToProps = state => {
  return {
    prs: state.persons
  };
};

const mapDispatchToProps = dispatch => {
  return {
    personAddedHandler: persons => dispatch(actions.addPerson(persons)),
    personDeletedHandler: (persons, personId) =>
      dispatch(actions.deletePerson(persons, personId))
  };
};

const PersonsContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(PersonsComponent);

export default PersonsContainer;

ниже нашего редуктора головной боли (reducer.jsx) :

import types from "../constants/types";

const initialState = {
  persons: [
    {
      id: Math.random(),
      name: "Max",
      age: Math.floor(Math.random() * 40)
    }
  ]
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case types.ADD_PERSON.type:
      return {
        ...state,
        persons: action.payload
      };
    case types.DELETE_PERSON.type:
      return {
        ...state,
        persons: action.payload
      };
    default:
      return state;
  }
};

export default reducer;

И, конечно, каждый редуктор имеет свое собственное действие:

import types from "../constants/types";

export default {
  addPerson: (persons) => {
    const newPerson = {
      id: Math.random(), // not really unique but good enough here!
      name: "Max",
      age: Math.floor(Math.random() * 40)
    };
    return {
      type: types.ADD_PERSON.type,
      payload: persons.concat(newPerson)
    };
  },
  deletePerson: (persons, personId) => ({
    type: types.DELETE_PERSON.type,
    payload: persons.filter(person => person.id != personId)
  })
};

Но когда я запускаю свое приложение с npm start , я получаю следующая ошибка, показанная ниже:

Эта ошибка говорит мне о том, что магазин, скорее всего, неизвестен (только сомнение, я не уверен) .

Резервный магазин все еще определен в index. js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import reducer from './store/reducer';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(reducer);

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();

Любая помощь будет оценена, спасибо за ваш nswer.

Answer 1

Пожалуйста, добавьте условие для проверки нуля и длины перед привязкой

{prs && prs.length > 0 && (prs.map(person => (
          <Person
            key={person.id}
            name={person.name}
            age={person.age}
            clicked={() => personDeletedHandler(prs, person.id)}
          />
        )))}

Answer 2

Проблема в том, что вы используете PersonComponent, который не упакован и не имеет props от Redux. Используйте PersonsContainer вставку в вашем файле App.js.

Answer 3

Обычно это происходит, когда переменная undefined и вы вызываете map() для этого. Переменная должна быть массивом, даже если он пустой.

В React вы можете использовать && для предотвращения этой ошибки.

Пожалуйста, найдите Возможное решение:

{prs && prs.map(person => (
          <Person
            key={person.id}
            name={person.name}
            age={person.age}
            clicked={() => personDeletedHandler(prs, person.id)}
          />
))}

Таким образом, вы проверяете, есть ли prs значение, и если оно имеет значение, тогда map().

Надеюсь, это поможет!