Question

状态已更新，还使用mapStateToProps向道具提供了最新数据，但是，它未在地图方法 ，一旦道具更新。

添加学生后，您将看到更新的状态，该状态将发送到表单组件。

这是我的代码，

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;

StudentForm：组件

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)

StudentList：组件+容器

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

使用object spread operator，您将可以解决此问题：

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

在reducer中尝试

ArrayList

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

3 个答案: