Question

我正在使用react + redux构建Todo应用。当我在列表中添加新的待办事项时，存储状态和TodoList组件的状态会成功更新，但我的todoList代码无法正常工作。 React组件不是渲染列表。

国家结构如下。

State = [
   {
     id,
     text,
     completed
   },...
]

我的代码如下。

Todo.js

import React, { Component } from 'react';
import Form from './Form';
import TodoList from './TodoList';
import Filter from './Filter';

class ToDo extends Component {
    render() {
        return (
            <div>
                <h2>Todo App</h2>
                <Form />
                <TodoList />
                <Filter />
            </div>
        );
    }
}

export default ToDo;

TodoList.js

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

class TodoList extends Component {
    constructor (props){
        super(props);
        this.state = {
            list: []
        };
    }

    render() {
        console.log(this);
        const todolist = this.state.list;
        return (
            <ul>
            {
                todolist.map(function(listValue) {
                    return <li>{listValue.text}</li>;
                })
            }
            </ul>
        );
    }
}

const mapStateToProps = (state) => {
    console.log('TodoList state',state);
    return {
        todos: state
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({toggleToDo},dispatch);
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

Answer 1

您正在使用mapStateToProps将状态映射到道具，因此您应该从道具中获取此状态值。

const { todos } = this.props;并在todos而不是todolist上进行迭代。

列表不呈现给父组件

1 个答案: