为什么我的todo项目不会用Redux渲染？ [英] Why aren't my todo items rendering with Redux?
问题描述
我正在做一个简单的redux /反应todo应用程序。我不能得到待办事项显示。我可以 console.log 的数据，但不能让它出现。我做错了什么？
我分离了文件，这里是我的 app.js ：
import反应，{Component}来自'react';
从'./todos'导入Todos;
从./todo_list导入TodoList;
导出默认类App extends Component {
render（）{
return（
< div>
Todos />
< TodoList />
< / div>
）;
}
}
这是容器 Todos ：
import反应，{Component}来自'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}）
}
呈现（）{
return（
< div>
< form onSubmit = {（e）=> this.addTodo（e）}>
< input
placeholder =Add Todo
value = {this.state.text}
onChange = {（e）=> {
this.updateValue（e）
}}
/>
< button type =submit>添加Todo< / button>
< / form>
< / div>
）;
}
}
函数mapDispatchToProps（dispatch）{
return bindActionCreators（{addTodo}，dispatch）;
}
export default connect（null，mapDispatchToProps）（Todos）;
这里是 TodoList ：
import来自'react'的React，{Component};
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>
）;
}
}
函数mapStateToProps（{todo}）{
console.log（{todo}）;
return {todo};
}
export default connect（mapStateToProps）（TodoList）;
减速器：
code> import {ADD_TODO} from'../actions/types';
export default function（state = []，action）{
switch（action.type）{
case ADD_TODO：
return [action.payload.message， ... state]
}
return state;
}
和动作
<$来自'./types'的p $ p>
import {ADD_TODO};
const uid =（）=> 。的Math.random（）的toString（34）.slice（2）;
导出函数addTodo（message）{
const action = {
id：uid（），
message：message
};
return {
type：ADD_TODO，
payload：action
};
}
这是从console.log（{todo}）获得的;
这是我的reducers / index： / p>
import {combineReducers} from'redux';
从'./reducer_addTodo'导入TodosReducer;
const rootReducer = combineReducers（{
todo：TodosReducer
}）;
export default rootReducer;
这是因为您的 TodoList 和reducer。 TodoList ，当映射时，期望每个todo都有一个消息 prop，但是当您返回下一个状态时，reducer只有在状态数组中包含消息，而不是具有消息的对象属性：
case ADD_TODO：
return [action.payload.message，... state]
而不是将消息字符串放在下一个状态的数组中，放在整个对象中：
case ADD_TODO：
return [action.payload，... state]
现在， todo 数组中的每个元素都将是一个对象，并有一个消息和 id 属性。另外，尝试使用一个始终唯一的表达式 key - 它不应该是todo消息，也不是 id 您提供的是因为它使用 Math.random ，它们都具有一致的可能性。
I'm doing a simple redux / react todo app. I can't get the todo items to show up. I'm able to console.log the data, but can't get it to appear. What am I doing wrong?
I separated the files, here is my 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>
);
}
}
Here is the container 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);
Here is the 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);
Reducer:
import { ADD_TODO } from '../actions/types';
export default function(state=[], action) {
switch(action.type) {
case ADD_TODO:
return [ action.payload.message, ...state ]
}
return state;
}
And action
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
};
}
This is what I get from the console.log({todo});
Here is my reducers/index:
import { combineReducers } from 'redux';
import TodosReducer from './reducer_addTodo';
const rootReducer = combineReducers({
todo: TodosReducer
});
export default rootReducer;
It's because there's a disconnect between your TodoList and reducer. TodoList, when mapping, expects each todo to have a message prop, but your reducer, when returning next state, only includes the message in the state array, not an object with the message property:
case ADD_TODO:
return [ action.payload.message, ...state ]
Instead, do not just put the message string in the next state's array, put in the whole object:
case ADD_TODO:
return [ action.payload, ...state ]
Now every single element in the todo array will be an object and have a message and id property. Also, try using an always unique expression for key -- it really shouldn't be the todo message, nor the id you supplied because it's using Math.random which both have a possibility of keys being the same.
这篇关于为什么我的todo项目不会用Redux渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
