Question

我正在使用Axios执行GET请求，然后将信息存储到{information}属性中，然后将所有信息存储在我的状态中。在compoenntDidMount（）之后，如何使用setState设置输入字段的状态？我已经在this.props.getItemCredential之后尝试了.then（），但由于它不是标准的提取请求，因此无法正常工作？

我还尝试设置输入值的状态，例如：{this.state.profile.credential.itemArray [0] .company}，即使我在redux chrome扩展名中看到的正确，它也会返回未定义的状态处于状态。

我认为问题在于它正在返回未定义的原因，因为它无法更改输入的值，直到getItemCredential返回为止，但是我该如何等待它完成，然后针对每个参数调整this.state（无论如何）一个？

我的组件是什么样的：

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import TextFieldGroup from '../../common/TextFieldGroup';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getItemCredential, getCurrentProfile } from '../../../actions/profileActions';
import Spinner from '../../common/Spinner';


class EditInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            company: '',
            title: '',
            location: '',
            errors: {},
            disabled: false
        }

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    componentDidMount() {
        this.props.getItemCredential(this.props.match.params.id)
        this.props.getCurrentProfile()
    }



    onChange = (e) => {
        this.setState({[e.target.name]: e.target.value});
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.errors) {
            this.setState({errors: nextProps.errors});
        }
    }

    onSubmit = (e) => {
        e.preventDefault();

        const itemData = {
            company: this.state.company,
            title: this.state.title,
            location: this.state.location,
        }
    }


  render() {

    const { errors } = this.state;
    const { profile, loading } = this.props.profile;
    const { credential } = this.props.profile;

    let editContent;
    if (profile === null || loading) {
        editContent = <Spinner />
    } else {
        editContent = (
            <React.Fragment>
            <div>
<form onSubmit={this.onSubmit}>
<TextFieldGroup 
     placeholder={this.state.company}
     name="company"
     value={this.state.company}
     onChange={this.onChange}
     error={errors.company}
     required
 />
 <TextFieldGroup 
      placeholder="* Job Title"
      name="title"
      value={this.state.title}
      onChange={this.onChange}
      error={errors.title}
      required
 />
 <TextFieldGroup 
      placeholder="Location"
      name="location"
      value={this.state.location}
      onChange={this.onChange}
      error={errors.location}
      required
 />
 <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 text-center my-auto">
       <input type="submit" value="Submit" class="button text-center m-auto add-credentials-button mt-4" />
 </div>
 </form>
        </div>
        );
    }


    return (
        <div>
            {editContent}
        </div>
    )
  }
}
EditInfo.propTypes = {
    profile: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired,
    getItemCredential: PropTypes.func.isRequired,
    getCurrentProfile: PropTypes.func.isRequired,
    credential: PropTypes.object.isRequired
}
const mapStateToProps = state => ({
    profile: state.profile,
    credential: state.credential,
    errors: state.errors
});
export default connect(mapStateToProps, { addExperience, getExperienceCredential, getCurrentProfile })(withRouter(EditExperience));

这是我的状态标记：

profile: {
    credential: {
        itemArray: [
            0: {
                title: 'Some entry',
                company: 'Some entry',
                Location: 'some entry'
            }
        ]
    }
}

这是我正在发出的axios请求：

export const getItemCredential = (id) => dispatch => {
  dispatch(setProfileLoading());
  axios.get(`/profile/item-credential/${id}`)
      .then(res => 
          dispatch({
              type: GET_ITEM_CREDENTIAL,
              payload: res.data
          })    
      )
      .catch(err => 
          dispatch({
              type: GET_ERRORS,
              payload: err.response.data
          })   
      );
}

这是我的减速器的样子：

import { GET_PROFILE, PROFILE_LOADING, GET_ITEM_CREDENTIAL } from '../actions/types';



const initialState = {
    profile: null,
    credential: null,
    loading: false
}

export default function(state = initialState, action) {
    switch(action.type) {
        case PROFILE_LOADING: 
            return {
                ...state,
                loading: true
            }
        case GET_PROFILE:
            return {
                ...state,
                profile: action.payload,
                loading: false
            }
    case GET_ITEM_CREDENTIAL: 
        return {
            ...state,
            credential: action.payload
        }
    default: 
        return state;
}

}

Answer 1

如果您更改.then，则可以执行getItemCredential，这样它会返回一个Promise：

export const getItemCredential = (id) => dispatch => {
  dispatch(setProfileLoading());
  return axios.get(`/profile/item-credential/${id}`)
      .then(res => {
          dispatch({
              type: GET_ITEM_CREDENTIAL,
              payload: res.data
          });
          return res.data;
      })
      .catch(err => {
          dispatch({
              type: GET_ERRORS,
              payload: err.response.data
          });
          throw err;
      });
}

请注意在return中添加的getItemCredential。另外，请注意，res.data是从Promise中返回的，以便等待它的组件可以访问它。我还重新抛出了捕获的错误，以便Promise继续处于拒绝状态，而不是解决为undefined。

根据componentDidMount之后的反应状态设置输入值？

1 个答案: