Question

我是ReactJ的新手，所以我试图从POST剩余api编辑post记录。

我的post对象看起来像这样。

响应数据

post: {
        title: 'the title',
        body: 'the body'
}

EditPost.js

state = {
    post: {
        title: '',
        body: ''
    }
}

componentDidMount() {
    const { id } = this.props.match.params;
    jsonPlaceholder.get(`/posts/${id}`).then(res => {
        this.setState({ post: res.data })
        console.log(this.state.post)
    })
}

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

我像这样绑定它并分配onChange

<input type="text" name="title" placeholder="This is the title" value={this.state.post.title} onChange={this.handleChange.bind(this)} />

<textarea value={this.state.post.body} name="body" onChange={this.handleChange.bind(this)} ></textarea>

我的问题是这不是从状态更新帖子，而是创建新状态。

示例：

从state = { post: {} }到state = { post: {}, title: '', body: ''}

Answer 1

您没有正确访问post，spread原始对象并更改了所需的property

handleChange = e => {
    this.setState(prevState =>({
        post:{
            ...prevState.post,
            [e.target.name]: e.target.value
        }
    }));
}

请注意，我正在使用updater的{{1}}版本。使用setState比实际使用snapshot更安全，因为您无法保证...this.state不会在其他地方发生变化。

Answer 2

您应该在方法中添加“ post”属性。

赞：

this.setState({ post: { ...this.state.post, [e.target.name]: e.target.value } });

但我不建议您对此使用嵌套道具。

单一onChange仅适用于一种形式

2 个答案: