передать объект в setState не удается

Question

Я создал собственное веб-приложение для постов, где вы можете добавлять, удалять и обновлять посты. Прямо сейчас, когда я пытаюсь добавить сообщение и передать значение входных данных, бросить функцию, а затем выполнить 'setState', я получаю сообщение об ошибке, что-то не так, как я это делаю. не могли бы вы помочь?

Я мог бы просто удалить корневой объект из состояния ('post') и просто использовать заголовок body как для себя. Но я хочу структурировать это так: Post: {title, body}

import React, { Component } from 'react';
export class addPost extends Component {
  state = {
    post: {
      title: '',
      body: ''
    }
  };
  handleChange = e => {
    this.setState({ post[e.currentTarget.id]: e.currentTarget.value });
    console.log(this.state);
  };
  handleSubmit = () => {};
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          Enter title:
          <input
            type="text"
            value={this.state.title}
            onChange={this.handleChange}
            id="title"
          />
          Enter body:
          <input
            type="text"
            value={this.state.body}
            onChange={this.handleChange}
            id="body"
          />
        </form>
      </div>
    );
  }
}
export default addPost;

Я ожидаю передать этот объект post: {title: 'sometext', body: 'sometext'}

Answer 1

Вам нужно исправить в двух местах

1. Где вы устанавливаете состояние
2. Где вы получаете доступ к состоянию на входе

handleChange = e => {
    this.setState(prevState => ({
      post: { ...prevState.post, [e.target.id]: e.target.value }
    }));
  };
  
  
  <input value={this.state.post.title />
  <input value={this.state.post.body} />

Answer 2

Сделал для тебя песочницу: https://codesandbox.io/s/p2w7765j0

Большинство соглашений состоит в том, чтобы использовать свойство name для ваших входных данных и отображать их, используя event.target.name

import React, { Component } from "react";

class AddPost extends Component {
  state = {
    post: {
      title: "",
      body: ""
    }
  };

  handleChange = event => {
    this.setState(
      {
        post: {
          ...this.state.post,
          [event.target.name]: event.target.value
        }
      },
      () => console.log(this.state)
    );
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          Enter title:
          <input
            type="text"
            value={this.state.post.title}
            onChange={this.handleChange}
            name="title"
          />
          Enter body:
          <input
            type="text"
            value={this.state.post.body}
            onChange={this.handleChange}
            name="body"
          />
        </form>
      </div>
    );
  }
}
export default AddPost;