Question

我一直在使用Django后端创建待办事项应用程序，并使用REACT API响应前端。该动作已成功调度，并且数据已成功获取，但是在RenderTodo组件中，数据尚未出现。以下是附件。肯定的是，我缺少了一点小东西，但无法理解！我对这件事有些陌生，因此需要帮助。就像在TodoComponent.js中声明空状态一样吗？最后，我还将呈现的表单附加到了浏览器中。

连同以下数据一起，我现在将其放在GitHub here上。

目录结构为

文件：
configureStore.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));
}

todo.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;
    }

};

App.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);

RenderComponent.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>
                    ))}

从redux存储获取的数据未显示在组件中

1 个答案: