Реагировать на Redux setState после отправки действия - PullRequest
Новая
       7

Реагировать на Redux setState после отправки действия

0 голосов
/ 02 сентября 2018

Это мой компонент EditStudent в React, где я использую Redux для управления состоянием. Это мой код компонента. 

import React, { Component } from 'react'
import {connect} from 'react-redux';
import {getStudentDetail} from '../actions/studentActions';

class EditStudents extends Component {
    constructor(props){
        super(props);
        this.onInputChange = this.onInputChange.bind(this);
        this.state = {
            name:this.props.student.name,
            email:this.props.student.email,
            address:this.props.student.address
        }
        // this.state

    }

  render() {    
    return (
      <div>
      <form>
              <p>
                 <label>Name</label>
                 <input type="text" name="name" 
                 value={this.state.name} 
                 onChange={this.onInputChange}
                />
              </p>
              <p>
                 <label>Email</label>
                 <input type="text" name="email" 
                 value={this.state.email} 
                 onChange={this.onInputChange}
                 />
              </p>
              <p>
                 <label>Address</label>
                 <input type="text" name="address"
                  value={this.state.address} 
                  onChange={this.onInputChange}
                  />
              </p>
            <button type="submit">Update</button>
          </form>

      </div>
    )
  }
  onInputChange(e){
      var name = e.target.name;
    this.setState({[name]:e.target.value});

  }

  componentDidMount(){
      this.props.getStudentDetail(this.props.studentId());
  }
}

let mapDispatchToProps = (dispatch,ownProps)=>{
    return {
        getStudentDetail: (id)=>{
            dispatch(getStudentDetail(id));
        },
        studentId: ()=>{
            return ownProps.match.params.id;
        }

    }
}

const mapStateToProps = (state)=> {
    return {
        student:state.students.student
    }
}


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

Здесь у меня проблема с отображением ответа ajax в поле ввода текста. Я устанавливаю компонент в конструкторе, но когда ajax-запрос завершается, состояние не устанавливается.

Можно ли установить состояние после завершения ajax?

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

Я решаю это путем добавления функции componentWillReceiveProps () к компоненту. 

componentWillReceiveProps(nextProps){
    this.setState({
        name:nextProps.student.name,
        email:nextProps.student.email,
        address:nextProps.student.address
    })
  }

Большое спасибо, Сакхи Мансур за помощь.

0 голосов
/ 02 сентября 2018

вам нужно сохранить входное значение в вашем состоянии, так как вы повторно визуализируете свой ввод, чтобы изменения не отражались.

Выполните следующие изменения: 

constructor(props){
    super(props);
    this.onInputChange = this.onInputChange.bind(this);
    this.state = {
        email:this.props.student.email,
        address: this.props.student.address
    }
}

В вас рендер: 

<p>
   <label>Email</label>
   <input type="text" name="email" value={this.state.email} onChange={this.onInputChange('name)}/>
</p>
<p>
   <label>Address</label>
   <input type="text" name="address" value={this.state.address} onChange={this.onInputChange('name')}/>
</p>


onInputChange= name => event => {
        this.setState({
          [name]: event.target.value,
         });
   };
...