为什么我的待办事项不能用 Redux 渲染？答案

【问题标题】：Why aren't my todo items rendering with Redux?为什么我的待办事项不能用 Redux 渲染？
【发布时间】：2017-12-05 22:52:27
【问题描述】：

我正在做一个简单的 redux / react todo 应用程序。我无法显示待办事项。我可以console.log 数据，但不能让它出现。我做错了什么？

我把文件分开了，这是我的app.js：

import React, { Component } from 'react';
import Todos from './todos';
import TodoList from "./todo_list";

export default class App extends Component {
  render() {
    return (
      <div>
        <Todos />
        <TodoList/>
      </div>
    );
  }
}

这里是容器Todos：

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { addTodo } from '../actions/index';

class Todos extends Component {
    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    addTodo(e) {
        e.preventDefault();
        this.props.addTodo(this.state.text);
        this.setState({
            text: ''
        });
    }

    updateValue(e) {
        this.setState({text: e.target.value})
    }

    render() {
        return (
            <div>
                <form onSubmit={(e) => this.addTodo(e)}>
                    <input
                        placeholder="Add Todo"
                        value={this.state.text}
                        onChange={(e) => {
                            this.updateValue(e)
                        }}
                    />
                    <button type="submit">Add Todo</button>
                </form>
            </div>
        );
    }
}


function mapDispatchToProps(dispatch) {
    return bindActionCreators({addTodo}, dispatch);
}

export default connect(null, mapDispatchToProps)(Todos);

这里是TodoList：

import React, {Component} from 'react';
import {connect} from 'react-redux';

class TodoList extends Component {

    render() {
        return (
            <ul>
                { this.props.todo.map((tod) => {
                    return <li key={tod.message}>{ tod.message }</li>
                })}
            </ul>
        );
    }
}

function mapStateToProps({ todo }) {
    console.log({ todo });
    return { todo };
}

export default connect(mapStateToProps)(TodoList);

减速机：

import { ADD_TODO } from '../actions/types';

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

和行动

import { ADD_TODO } from './types';
const uid = () => Math.random().toString(34).slice(2);

export function addTodo(message) {
    const action = {
        id: uid(),
        message: message
    };
    return {
        type: ADD_TODO,
        payload: action
    };
}

这是我从 console.log({todo}) 得到的；

这是我的减速器/索引：

import { combineReducers } from 'redux';
import TodosReducer from './reducer_addTodo';

const rootReducer = combineReducers({
    todo: TodosReducer
});

export default rootReducer;

【问题讨论】：

你从 console.log({todo}) 得到了什么？
我在问题上添加了一个编辑，显示了我从 console.log 得到的内容。

标签： javascript ecmascript-6 redux react-redux

【解决方案1】：

这是因为您的TodoList 和reducer 之间存在脱节。 TodoList，在映射时，期望每个 todo 有一个 message 属性，但是你的 reducer，在返回下一个状态时，只包含状态数组中的消息，而不是具有 message 属性的对象：

case ADD_TODO:
  return [ action.payload.message, ...state ]

相反，不要只将message 字符串放入下一个状态的数组中，而是放入整个对象中：

case ADD_TODO:
  return [ action.payload, ...state ]

现在todo 数组中的每个元素都将是一个对象，并具有message 和id 属性。另外，尝试对key 使用始终唯一的表达式——它真的不应该是待办事项消息，也不是您提供的id，因为它使用的是Math.random，两者都有可能是相同的键。

【讨论】：