时间戳

首页 > 解决方案 > mapStateToProps 未定义的状态值？

javascript - mapStateToProps 未定义的状态值？

问题描述

首先，我知道这段代码片段中的很多内容都已关闭，我知道。我只是想在这里解决这个问题。由于某种原因，我的应用程序说它无法读取未定义的属性“待办事项”，并在我的 Form.js mapStateToProps 方法中突出显示待办事项：[...state.todos]。我不是在进口我应该在这里的东西吗？

表单.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import uuidv1 from 'uuid';
import { addTodo } from '../actions';
import TodoInput from './todo-input';
import TodoList from './TodoList';

const mapDispatchToProps = dispatch => {
  return {
    addTodo: todo => dispatch(addTodo(todo))
  };
};

const mapStateToProps = (state) => ({
  todos: [...state.todos]
})

class ConnectedForm extends Component {
  constructor(props){
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleToggle = this.handleToggle.bind(this);
  };

  handleChange = (e) => {
    e.preventDefault();
    this.setState({
      inputValue: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const { inputValue} = this.state;
    const id = uuidv1();
    this.props.addTodo({inputValue, id});
    this.setState({inputValue: ''});
  }

  handleToggle (e) {
    const id = parseInt(e.target.id);
    this.setState((prevState) => ({
      todos: prevState.todos.map(todo => todo.id === id ? {...todo, done: !todo.done} : todo)
    }));
    console.log(e.target);
  }

  render() {
    const { inputValue } = this.state;
    return (
        <div className='form-group'>
          <TodoInput
            value={inputValue}
            onChange={this.handleChange}
            onSubmit={this.handleSubmit}
          />

          <TodoList />
        </div>
    );
  }
}

const Form = connect(mapStateToProps, mapDispatchToProps) (ConnectedForm);

export default Form;

TodoList.js

import React, { Component } from 'react';
import TodoItem from './TodoItem';
import { removeTodo, toggleComplete } from '../actions';
import { connect } from 'react-redux';

const mapDispatchToProps = dispatch => {
  return {
      removeTodo: id => dispatch(removeTodo(id)),
      toggleComplete: isDone => dispatch(toggleComplete(isDone))
    };
  };

const mapStateToProps = state => {
  return {todos: [...state.todos]};
};

class List extends Component {
  render() {
    const mappedTodos = this.props.todos.map((todo, index) => (
      <TodoItem 
      todo={todo}
      title={todo.title}
      key={index}
      removeHandler={this.props.removeTodo}
      toggleComplete={this.props.toggleComplete}
      />
    ));
    return (
      mappedTodos
    );
  }
}

const TodoList = connect(mapStateToProps, mapDispatchToProps) (List)
export default TodoList;

减速机

import { ADD_TODO, REMOVE_TODO, TOGGLE_COMPLETE } from '../constants/action-types'; 
import uuidv1 from 'uuid';

const initialState = {
  todos: []
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
    return {
        ...state,
        todos: [...state.todos,
          {
            title: action.payload.inputValue,
            id: uuidv1(),
            createdAt: Date(),
            priority: '',
            deadline: '',
            isComplete: false
          }]
    }

    case REMOVE_TODO:
    return {
      ...state,
      todos: [...state.todos.filter(todo => todo.id  !== action.payload)]
    }

    case TOGGLE_COMPLETE: 
    return (
      console.log(action.payload)
    )

    default:
      return state;
  }

标签： javascriptreactjsredux

解决方案

首先你的问题不是很清楚，因为你没有说错误的确切来源，但总而言之，我可以看到在handleToggle中ConnectedForm class，你试图在你prevState.todos没有的状态下class循环没有任何todos属性，您也没有在其中的任何地方设置一个class。因此，您正在尝试访问todo实际上未在state.

推荐阅读