Null в массиве объектов

Question

Итак, у меня проблема с REACT / REDUX, мой массив объектов возвращает правильное значение, но также возвращает неопределенное значение, и я не знаю почему.В инструментах redux dev он показывает ноль вместо undefined, также у меня есть эта ошибка в консоли: Предупреждение: сбойный тип проп: пропел task помечен как обязательный в NewToDo, но его значение равно undefined.

Файл действий

import {ADD_TODO} from "./types";
import {GET_TODO} from "./types";

export const addTodo = (todo) => dispatch => {
    dispatch({
        type: ADD_TODO,
        payload: todo,
    })
}

export const getTodo = () => dispatch => {
    dispatch({
        type: GET_TODO,
    })
}

Редуктор

import {ADD_TODO} from "../actions/types";
import {GET_TODO} from "../actions/types";

const initialState = {
    toDos: [
        {task: 'Make a dinner', priority: '4'}
        ],

};

export default function(state=initialState, action){
    switch(action.type){
        case ADD_TODO:
            return{
                ...state,
                toDos: [action.payload, ...state.toDos]
            }
        case GET_TODO:
            return {
                ...state,
            }
        default:
            return state;
    }
}

Компонент, который отображает задачи

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux'
class NewToDo extends Component {
    render() {
        console.log(this.props.task)

            return (
                <div>
                </div>
            );
        }
    }


NewToDo.propTypes = {
    task: PropTypes.object.isRequired,
};

export default NewToDo;

Компонент со всемиtoDos

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import NewToDo from './newToDo'
import {getTodo} from "../../actions/toDoActions";
import {connect} from 'react-redux'
class ToDos extends Component {
    componentDidMount(){
        this.props.getTodo();
    }

    render() {
        const {toDos} = this.props;
        console.log(toDos)
        return (
            <div>
                {toDos.map( todo => (
                    <NewToDo task={todo}/>
                ))}

            </div>
        );
    }
}


ToDos.propTypes = {
    toDos: PropTypes.array.isRequired,
    getTodo: PropTypes.func.isRequired,


}

const mapStateToProps = (state) => ({
    toDos: state.toDo.toDos
})

export default connect(mapStateToProps, {getTodo})(ToDos);

Answer 1

вы не подключили свой компонент к магазину приставок.Затем вам также нужно взять магазин излишков и сопоставить ваши ценности с реквизитом.Попробуйте это

Class NewToDo extends Component {
...
 }

const mapStateToProps = (state) => {
return {
task: state.toDos   
  }
}

export default connect(mapStateToProps)(NewToDo)

это должно связать ваш массив с this.props.task

Answer 2

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

Необходимо передать опору с именем task в NewToDo.Он не определен, потому что вы потребовали в вашем PropTypes a prop, называемом task, то есть object, но где-то на этом пути вы не пропустите эту опору.Вы можете передать реквизит, подключившись к хранилищу резервов, используя также mapStateToProps.

Кроме того, в вашем initialState для вашего reducer разве по умолчанию не должно быть initialState.todos?Просто кажется, что это может быть более логичным, и тогда вы можете использовать оператор распространения в случае ADD_TODO, просто распространив [action.payload, ...state].

Обновление

Iизменил ваш toDoReducer.js на:

import {ADD_TODO} from "../actions/types";
import {GET_TODO} from "../actions/types";

const initialState = {
    toDos: [
        {task: 'Make a dinner', priority: '4'}
        ],

};

export default function(state=initialState.toDos, action){
    switch(action.type){
        case ADD_TODO:
            return [action.payload, ...state]
        case GET_TODO:
            return [
                ...state,
            ]
        default:
            return state;
    }
}

Я изменил ваш ToDo.js на:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import NewToDo from './newToDo'
import {getTodo} from "../../actions/toDoActions";
import {connect} from 'react-redux'
class ToDos extends Component {
    componentDidMount(){
        this.props.getTodo();
    }

    render() {
        const {toDos} = this.props;
        console.log(toDos)
        return (
            <React.Fragment>
                {toDos.map( todo => (
                    <NewToDo task={todo}/>
                ))}

            </React.Fragment>
        );
    }
}


ToDos.propTypes = {
    toDos: PropTypes.array.isRequired,
    getTodo: PropTypes.func.isRequired,


}

const mapStateToProps = (state) => ({
    toDos: state.toDos
})

export default connect(mapStateToProps, {getTodo})(ToDos);

Answer 3

Вам нужно будет подключить редуктор к странице компонента, чтобы он имел доступ к задаче из хранилища редуктов в качестве реквизита:

import * as todoSelector from ../reducer;
/* other code blocks */

const mapStateToProps = (state) => {
  return {
    task: todoSelector.getTask(state),
  };
}

export default connect(mapStateToProps)(NewToDo);

В редукторе есть функция выбора, которая возвращает задачу изштат.

export function getTask(state) {
  const task = state.task;
  /* task manipulations to fit rendering needs */
  return task;
}