我正在尝试创建一个表单,用户可以在其中编辑现有的视频标题和说明。发送PATCH请求时,出现以下错误。参数正在读取正确的视频ID,但位置错误。我需要进行哪些修改才能使其正常工作?
编辑表单
class Edit extends React.Component {
constructor(props) {
super(props)
this.state = {
video_id: this.props.match.params.id,
video_title: "",
video_description: "",
}
this.handleSubmit = this.handleSubmit.bind(this);
}
update(field) {
return (e) => {
this.setState({
[field]: e.currentTarget.value
})
}
}
handleSubmit() {
// debugger
this.props.updateVideo(this.state.video_id)
}
render() {
return (
<div className="edit-container">
<form className="edit-form" onSubmit={this.handleSubmit}>
<label>
<input
type="text"
value={this.state.video_title}
placeholder="Your video's title"
onChange={this.update("video_title")}
/>
<div>{this.state.video_title}</div>
</label>
<label>
<input
type="textarea"
value={this.state.video_description}
placeholder="Your video's description"
onChange={this.update("video_description")}
/>
</label>
<button>Edit</button>
</form>
</div>
);
}
}
export default Edit;
编辑容器
import { connect } from 'react-redux';
import Edit from './edit';
import { fetchVideo, updateVideo } from '../../actions/video_actions';
const mSTP = ( state, ownProps ) => {
return {
// video: state.entities.videos[state.session.id],
video: state.entities.videos[ownProps.match.params.id],
// errors: state.errors
}
};
const mDTP = dispatch => ({
fetchVideo: videoId => dispatch(fetchVideo(videoId)),
updateVideo: video => dispatch(updateVideo(video)),
});
export default connect(mSTP, mDTP)(Edit);
视频api实用程序
export const updateVideo = video => {
return $.ajax({
method: 'patch',
url: `api/videos/${video.id}`,
data: { video }
})
}
视频控制器
def update
@video = Video.find(params[:id])
if @video.update(video_params)
render :show
else
render json: @video.errors.full_messages, status: 422
end
end
def video_params
params.require(:video).permit(:video_title, :video_description, :owner_id, :video_url)
end
Rails.application.routes.draw do
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
root to: 'static_pages#root'
namespace :api, defaults: {format: :json} do
resources :users, only: [:create, :index]
resource :session, only: [:create, :destroy]
resources :videos
end
end
在handleSubmit中,您将video_id传递给updateVideo函数:
handleSubmit() {
// debugger
this.props.updateVideo(this.state.video_id)
}
但是您的updateVideo函数需要一个视频对象:
export const updateVideo = video => {
return $.ajax({
method: 'patch',
url: `api/videos/${video.id}`,
data: { video }
})
}
因此您无法从video.id
中获得定义。