在console.log中，状态已更新，也通过道具反映出来，但是该组件未重新呈现

Question

状态会更新 ，还会使用mapStateToProps向道具提供最新数据 ，但是一旦道具更新， 它就不会在Map方法中呈现子组件StudentList和Student 。

一旦添加了student ，您就可以看到更新后的状态，该状态将被发送到Form组件。

这是我的代码，

Index.js

   var store = createStore(studentFormReducer);

    ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.

    serviceWorker.unregister();

App.js

import React, { Component } from 'react';
import './App.css';
import StudentFormContainer from './containers/StudentFormContainer';
import StudentList from './components/StudentList'


class App extends Component {
    render() {
        return (
            <div className="container-fluid">
                <StudentFormContainer></StudentFormContainer>
                <StudentList></StudentList>
            </div>

        );
    }
}

export default App;

学生表格：组件

import React, { Component } from 'react';

 export default class StudentForm extends Component {

    constructor(){
        super();
        this.state={
            student : {
                name:"",

            }
        };

    }

    render() {
        return (
            <div className="formcontainer">
                <button type="button" name="addstudent" id="addstudent" onClick={(e)=>{this.props.addStudent(this.state.student); console.log(this.props.currentstate)}} className="btn btn-primary btn-lg ">Add student</button>
                <form>
                    <div className="form-group">
                      <label htmlFor="name">Student name</label>
                      <input type="text" name="name" id="name" value={this.state.student.name} onChange={(e)=>{e.preventDefault(); this.setState({student:{name : e.target.value}})}} className="form-control" placeholder="Enter student name" aria-describedby="helpId"/>

                    </div>
                </form>
            </div>
        );
    }
}

StudentFormContainer：容器

import {connect} from 'react-redux';
import StudentForm from '../components/StudentForm'
import {addStudentAction} from '../actions/index'

const mapStateToProps = (state)=>{
    console.log("New state updated");
    return{
        studentlist : state.studentlist,
        currentstate : state
    };
}

const mapDispatchToProps = (dispatch)=>{
    return{
        addStudent : (student)=>{console.log("Dispatching");dispatch(addStudentAction(student))}
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(StudentForm)

学生列表：组件+容器

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

import Student from './Student'

class StudentList extends Component {

    render() {
        return (
            <div className="studentlist">

                {this.props.studentlist.map(
                    (student,index)=>(<Student key={index} student={student}></Student>))
                }
                </div>
        );
    }
}

const mapStateToProps = (state)=>{

    return{
        studentlist : state.studentlist,
        currentstate : state
    };
}
export default connect(mapStateToProps)(StudentList)

学生表格减少者

export const studentFormReducer = (state={},action)=>{
    if(action.type=="ADD_STUDENT"){
        var id = state.studentlist.length+1;
        action.student.id = id;
        state.studentlist.push(action.student);
        return state;
    }
    else{
        if(state.studentlist===undefined){
            var newstate2 = {studentlist:[]}
            return newstate2;
        }else{
            return state;
        }
    }
}

行动

export const addStudentAction = (student)=>
{
    return{
        type : "ADD_STUDENT",
        student : student
    }
};

Answer 1

state应该是不变的。 在代码中，您直接操作了state对象。

state.studentlist.push(action.student);

使用对象传播运算符 ，您将能够解决此问题：

switch(action.type) {
  case "ADD_STUDENT":
    let student = action.student;
    student.id = state.studentList.length + 1; // set student id
    return {
      ...state,
      studentList: [
        ...state.studentList,
        student // add new student to student list
      ]
    };
  default:
    return state;
}

Answer 2

我认为您在尝试添加新学生并将该学生对象更新为现有数组，如果我没有记错的话。 在reducer函数中使用if条件不是一个好选择，最好在switch情况下使用。

 const initialState = { studentlist: [] } export const studentFormReducer = (state=initialState, action)=>{ switch(action.type){ case "ADD_STUDENT": return{ ...state, studentlist: [...state.studentlist, action.student] } default: return state; } } 

Answer 3

在减速器中尝试一下

case ADD_STUDENT :
    return { 
        ...state,
        studentList: state.studentList.concat(action.student)
    }