如何使用 axios.put 并做出反应？答案

【问题标题】：How to work with axios.put and react?如何使用 axios.put 并做出反应？
【发布时间】：2018-03-07 06:31:53
【问题描述】：

我正在尝试使用 react redux 和 form-redux 创建一个简单的 crud 系统。下面的代码但不起作用并给出错误。首先，我为更新创建了一个动作，然后为此创建了一个减速器。然后创建组件来使用该动作。

让我知道如何让它工作。

//-------------action--------------

export const EDIT_POST = 'EDIT_POST';
export const editPost = (id) => {
  const request = axios.put(`${BOOK_URL}/books/${id}`);
  return {
    type: EDIT_POST,
    payload: id,
  }
};
//---------------- reducer-----------------
case EDIT_POST: {
      return {...state, post: action.payload.data}
    }
    
//----------------route--------------

          <Route path='/posts/edit/:id' component={PostEdit}/>


//-------------------PostEdit---------------


class PostEdit extends Component {

  componentDidMount = () => {
    this.props.editPost(this.props.match.params.id);
    console.log(this.props.editPost(this.props.match.params.id));
  };
  renderField = field => {
    const {meta: {touched, error}} = field;
    const className = `form-group ${touched && error ? 'has-danger' : ''}`;
    return (
      <div className='has-danger'>
        <label>{field.label}</label>
        <input type="text" {...field.input} className="form-control"/>
        <div className="text-help">
          {touched ? error : ''}
        </div>
      </div>
    );
  };

  

  render() {
    const {handleSubmit} = this.props;
    return (
      <form onSubmit={handleSubmit(this.onSubmitForm)}>
        <Field name="title" label="Title" component={this.renderField}/>
        <Field name="author" label="Author" component={this.renderField}/>
        <Field name="description" label="Description" component={this.renderField}/>
        <Field name="publicationDate" label="PublicationDate" component={this.renderField}/>

        <button type='submit' className="btn btn-primary">Submit</button>
        <Link to='/' className='btn btn-danger'>Cancel</Link>
      </form>
    );
  }
}

export default  reduxForm({
 form :'updateForm'
})(connect(null, {editPost})(PostEdit));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【问题讨论】：

信息不足或问题不清楚
对不起，我上传了我的文件，请锁定它们 tanx ufile.io/54ct4

标签： react-redux axios redux-form

【解决方案1】：

你能说出你遇到了什么错误吗？

你必须改变你的行为，比如

export const fetchPosts = () => {
    return (dispatch) => {
        axios.get(`${BOOK_URL}/books`).then((response) => {
            return dispatch({
                type: FETCH_POSTS,
                payload: // your response here
            });
        })
    }
}

【讨论】：

告诉payload是未定义的