Question

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

让我知道如何让它发挥作用。

//-------------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>

Answer 1

你能说出你得到的错误吗？

你必须像

一样改变你的行动

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

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

1 个答案: