Question

因此，我在REACT / REDUX上遇到问题，我的对象数组返回了正确的值，但还返回了未定义的值，我不知道为什么。在redux开发工具中，它显示为null而不是未定义，在控制台中也出现此错误：警告：prop类型失败：prop 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;

具有所有待办事项的组件

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

您需要将减速器连接到组件页面，以便它可以作为道具从redux存储访问任务：

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;
}

Answer 2

您尚未将组件连接到Redux存储。然后，您还需要使用Redux商店并将您的价值映射到道具。试试这个

Class NewToDo extends Component {
...
 }

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

export default connect(mapStateToProps)(NewToDo)

这应将您的数组链接到this.props.task

Answer 3

警告：道具类型失败：道具任务在以下位置标记为必需 NewToDo，但其值未定义。

您需要将名为ppt的道具传递给task。它是未定义的，因为您在NewToDo中需要一个名为PropTypes的{{1}}的{{1}}，但是在此过程中，您并没有传递该道具。您也可以使用prop连接到redux存储来传递道具。

此外，在您的task的{{1}}中，默认值不是object吗？似乎这可能更合乎逻辑，然后您可以通过扩展mapStateToProps来使用initialState的扩展运算符。

更新

我将您的toDoReducer.js更改为：

reducer

我将您的ToDo.js更改为：

initialState.todos

对象数组为空

3 个答案: