從 redux 存儲中獲取的數據未顯示在組件中

Question

我一直在用 Django 后端創建一個待辦事項應用程序，並使用 REACT API 對前端做出反應。 動作被成功調度並且數據獲取成功，但是在RenderTodo組件中數據還沒有出現。 下面是附件。 當然，我只是缺少一些小東西，但無法得到它！ 我對這件事有點陌生，所以需要幫助。 是否類似於在TodoComponent.js聲明一個空狀態？ 最后我還在瀏覽器中附加了呈現的表單。

隨着下面的數據我現在已經把它放在GitHub上這里。

目錄結構是

文件：
配置Store.js

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import logger from 'redux-logger';

import { Todos } from './reducers/todo';

export const ConfigureStore =() => {
    const store = createStore(
        combineReducers({
            todos: Todos,
        }),
        composeWithDevTools(applyMiddleware(thunk, logger))
    );
    return store;
}

ActionCreators.js

import * as ActionTypes from './ActionTypes';
import { baseUrl } from './baseUrl';
import axios from 'axios';

//GET_TODOS
export const getTodos = () => (dispatch) => {
    axios
        .get('api/todo/')
        .then(res => {
            dispatch({
                type: ActionTypes.GET_TODOS,
                payload: res.data
            });
        }).catch(err => console.log(err));
}

待辦事項.js

import * as ActionTypes from '../ActionTypes';

export const initialState = {
    todos: []
}

export const Todos = (state=initialState, action) => {
    switch(action.type) {
        case ActionTypes.GET_TODOS:
            return {
                ...state,
                todos: action.payload
            };

        default:
            return state;
    }

};

應用程序.js

import React, { Component, Fragment } from "react";

//used for providing store to all child components
import { Provider } from "react-redux";

import Todo from "./components/TodoComponent";
import { ConfigureStore } from "./redux/configureStore";

const store = ConfigureStore();

export class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Fragment>
                    <Todo />
                </Fragment>
            </Provider>
        );
    }
}

export default App;

TodoComponent.js

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

import { getTodos } from "../redux/ActionCreators";
import RenderTodo from "./RenderTodoComponent";

const mapStateToProps = (state) => ({
    todos: state.todos.todos,
});

const mapDispatchToProps = (dispatch) => ({
    getTodos: () => {
        dispatch(getTodos());
    },
});

class Todo extends Component {
    componentDidMount() {
        this.props.getTodos();
    }

    render() {
        return (
            <div className="Main">
                <h1>Todos</h1>
                <RenderTodo todos={this.props.todos} />
            </div>
        );
    }
}

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

渲染組件.js

import React from "react";

export default function RenderTodo(props) {
    return (
        <div>
            {console.log("second component")}
            <table className="table table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Text</th>
                        <th>Completed</th>
                        <th>Created_at</th>
                        <th />
                    </tr>
                </thead>
                <tbody>
                    {props.todos.map((todo) => {
                        <tr key={todo.id}>
                            <td>{todo.id}</td>
                            <td>{todo.text}</td>
                            <td>{todo.created_at}</td>
                            <td>{todo.completed}</td>
                            <td>
                                <button className="btn btn-danger btn-sm">Delete</button>
                            </td>
                        </tr>;
                    })}
                </tbody>
            </table>
        </div>
    );
}

瀏覽器
控制台打印第二個組件是一個調試語句，顯示第二個組件的渲染，然后調用第一個組件的 componentDidMount。

編輯：添加了 redux-dev 工具 -images
我附上了操作、狀態和差異，希望這有助於故障排除。 這里一切似乎都很好

Answer 1

你沒有從props.todos.map返回任何東西

將{和}替換為(和)以返回 JSX。

                   {props.todos.map((todo) => ( // this was previously a {
                        <tr key={todo.id}>
                            <td>{todo.id}</td>
                            <td>{todo.text}</td>
                            <td>{todo.created_at}</td>
                            <td>{todo.completed}</td>
                            <td>
                                <button className="btn btn-danger btn-sm">Delete</button>
                            </td>
                        </tr>
                    ))}