Javascript 虽然新状态显示在控制台中的React/Redux中，但道具更改不会反映在组件UI上

我试图在这里做一些react/redux基础，但存在一个问题，即状态存储中的状态更改没有反映在组件UI中。这是我的密码，我做错了什么

projectReducer.js

这是减速器：

const initState = {
    projects: [],
};

const projectReducer = (state = initState, action) => {
    switch (action.type) {
        case CREATE_PROJECT:
            const project = action.project;
            state.projects.unshift(project);
            return {
                ...state
            };
        case GET_PROJECTS:
            state.projects = action.projects;
            return {
                ...state
            };
        default:
            break;
    }
    return state;
}

export default projectReducer

projectAction.js

这就是行动

import axios from 'axios';
export const createProjectActionCreator = project => {
    return (dispatch, getState) => {
        // make async call to dispatch 
        axios.post('http://localhost:4000/projects/create-project', project).then(result => {
           dispatch({
                type: 'CREATE_PROJECT',
                project: result.data.project
            });
        }).catch(err => {
            console.log(err)
        });
    }
} 

export const getProjectsActionsCreator = () => {
    return (dispatch, getState) => {
        axios.get("http://localhost:4000/projects").then(result => {
           dispatch({
                type: 'GET_PROJECTS',
                projects: result.data.projects
            });
        }).catch(err => {
            console.log(err)
        });
    };
}

createProjectComponent.js

这是compent已创建的项目表单

import React from 'react';
import { connect } from "react-redux";
import { createProjectActionCreator } from "../../store/actions/projectActions";

class CreateProject extends React.Component {

    state = {
        projectData: {
            title: '',
            content: ''
        },
        createProjectErrors: []
    }

    handleChange = e => {
        const { id, value } = e.target;
        const { projectData }  = this.state;
        projectData[id] = value;
        this.setState({projectData});
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.createProject(this.state.projectData);
    }

    render() {
        return (
            <div className="container">
                <form onSubmit={e => this.handleSubmit(e)} className="white">
                    <h5 className="grey-text text-darken-3">Create New Project</h5>
                    <div className="input-field">
                        <label htmlFor="title">Title</label>
                        <input type="text" id="title" onChange={e => this.handleChange(e)}/>
                    </div>
                    <div className="input-field">
                        <label htmlFor="content">Content</label>
                        <textarea className="materialize-textarea" id="content" onChange={e => this.handleChange(e)}></textarea>
                    </div>
                    <div className="input-field">
                        <button className="btn pink lighten-1 z-depth-0">Create Project</button>
                    </div>
                </form>
            </div>
        )
    }
}

const mapDispatchToProps = dispatch => {
    return {
        createProject: project => dispatch(createProjectActionCreator(project))
    }
}

export default connect(null, mapDispatchToProps)(CreateProject)

从“React”导入React；
从“react redux”导入{connect}；
从“./../store/actions/projectActions”导入{createProjectActionCreator}”；
类CreateProject扩展了React.Component{
状态={
项目数据：{
标题：“”，
内容：“”
},
createProjectErrors:[]
}
handleChange=e=>{
const{id，value}=e.target；
const{projectData}=this.state；
projectData[id]=值；
this.setState（{projectData}）；
}
handleSubmit=（e）=>{
e、 预防默认值（）；
this.props.createProject（this.state.projectData）；
}
render（）{
返回(
this.handleSubmit（e）}className=“white”>
创建新项目
标题
this.handleChange（e）}/>
内容
此.handleChange（e）}>
创建项目
)
}
}
const mapDispatchToProps=调度=>{
返回{
createProject:project=>dispatch（createProjectActionCreator（项目））
}
}
导出默认连接（null，mapDispatchToProps）（CreateProject）

Dashboard.js

该组件的作用类似于主页，它呈现项目列表和项目创建的形式

import React, { Component } from 'react';
// import Notifications from './Notifications';
import ProjectList from '../projects/PorjectList';
import { connect } from 'react-redux';
import CreateProject from '../projects/CreateProject';
import { getProjectsActionsCreator } from "../../store/actions/projectActions";

class Dashoard extends Component {

    componentWillMount() {
       this.props.fetchProjects();
    }

    render() {
        return (
            <div className="dashboard container">
                <div className="row">
                    <div className="col s12 m6">
                        <ProjectList projects={this.props.projects} />
                    </div>
                    <div className="col s12 m6">
                        <CreateProject />
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => {
    console.log(state.project);
    return {
        projects: state.project.projects
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchProjects: () => dispatch(getProjectsActionsCreator())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashoard)

[enter image description here][1]

import React，{Component}来自'React'；
//从“./Notifications”导入通知；
从“../projects/PorjectList”导入项目列表；
从'react redux'导入{connect}；
从“../projects/CreateProject”导入CreateProject；
从“../../store/actions/projectActions”导入{getProjectsActionsCreator}”；
类Dashboard扩展组件{
组件willmount（）{
this.props.fetchProjects（）；
}
render（）{
返回(
)
}
}
常量mapStateToProps=状态=>{
console.log（state.project）；
返回{
项目：state.project.projects
}
}
const mapDispatchToProps=调度=>{
返回{
fetchProjects:（）=>dispatch（getProjectsActionsCreator（））
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（仪表板）
[在此处输入图像描述][1]

问题出在减速器中，您不应该改变状态（请参阅）

在每种情况下，您都返回一个引用不同的state副本，但您首先要改变原始状态。以下是您希望如何执行此操作：

const projectReducer = (state = initState, action) => {
    switch (action.type) {
        case CREATE_PROJECT:
            return {
                ...state, projects: [action.project, ...state.projects]
            };
        case GET_PROJECTS:
            return {
                ...state, projects: action.projects
            };
        default:
            return state;
    }
}

请注意，在这种情况下，

…状态

不是绝对必要的，因为

项目

是您唯一的状态（并且您希望覆盖它），但如果您添加更多状态，则需要扩展状态以避免覆盖存储中的任何其他状态

const projectReducer = (state = initState, action) => {
    switch (action.type) {
        case CREATE_PROJECT:
            return {
                ...state, projects: [action.project, ...state.projects]
            };
        case GET_PROJECTS:
            return {
                ...state, projects: action.projects
            };
        default:
            return state;
    }
}