ActiveRecord::RecordNotFound（找不到“id”=未定义的视频）：

Question

我正在尝试创建一个表单，用户可以在其中编辑现有的视频标题和说明。发送 PATCH 请求时，我收到以下错误。正如有人建议的那样，我更改了 handleSubmit 以获取正文，现在我得到 404，id 未定义，视频被读取为 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)
        const { video_id, ...rest } = this.state
        this.props.updateVideo(video_id, { video: { ...rest } })
    }

    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);

视频控制器

    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

export const updateVideo = video => {
    return $.ajax({
        method: 'patch',
        url: `api/videos/${video.id}`,
        data: { video }
    })
}

export const updateVideo = video => dispatch => {
    return VideoAPIUtil.updateVideo(video)
        .then(video => dispatch(receiveVideo(video)));
}

Answer 1

可能有必要查看实际发出 HTTP 请求的操作创建者，以了解updateVideo 的参数传播了多远。

一目了然，你能确认updateVideo中的参数签名是正确的吗？

它在容器中被这样调用：

this.props.updateVideo(video_id, { video: { ...rest } })

但是 mapDispatchToProps 函数看起来像这样：

  updateVideo: video => dispatch(updateVideo(video)),

updateVideo 应该只接收一个参数吗？看起来您正在发送两个参数（video_id、{ video: { ...rest } }）。

Answer 2

只要标题和描述字段都有用户输入，我终于让它工作了。

handleSubmit() {

        const { video_id, ...rest } = this.state
        this.props.updateVideo({ id: video_id, ...rest })

    }