Javascript 如何在POST请求后正确呈现新元素？

我有一个react页面，如下所示：

现在，当创建一个新类别时，post请求将进入数据库，但除非刷新页面（在页面启动时获取所有类别的请求），否则不会再次呈现类别以显示新类别

侧边栏.js

  createNewCategory = async (input) => {
    console.log("CREATING NEW: ", input);
    var response = await fetch("http://localhost:8081/api/categories", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Token": 1234,
        Accept: "application/json"
      },
      body: JSON.stringify({
        title: input
      })
    })
    let resp = await response.json();
    this.setState({
      categories: [...this.state.categories, resp]
    })
  }

  handleNewCategory = (event) => {
    event.preventDefault()
    this.props.createNewCategory(this.state.input)
    this.setState({
      input: ''
    })
  }

  render(){
    return (
      <form onSubmit={this.handleNewCategory} className="new-category-form">
        <h4>Create Category</h4>
        <input onChange={this.handleInput} className="new-category-input" type="text" value={this.state.input} />
        <input className="new-category-input" type="submit" value="Create" />
      </form>
    )
  }

function CategoriesContainer(props) {
  function renderCategories(){
    console.log("PROPS: ", props)
    return props.categories.map(category => {
      console.log("CATEACH: ", category)
      return <Category key={category.id} category={category} />
    })
  }

  return(
    <div>
      {renderCategories()}
    </div>
  )
}

CreateCategory.js

  createNewCategory = async (input) => {
    console.log("CREATING NEW: ", input);
    var response = await fetch("http://localhost:8081/api/categories", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Token": 1234,
        Accept: "application/json"
      },
      body: JSON.stringify({
        title: input
      })
    })
    let resp = await response.json();
    this.setState({
      categories: [...this.state.categories, resp]
    })
  }

  handleNewCategory = (event) => {
    event.preventDefault()
    this.props.createNewCategory(this.state.input)
    this.setState({
      input: ''
    })
  }

  render(){
    return (
      <form onSubmit={this.handleNewCategory} className="new-category-form">
        <h4>Create Category</h4>
        <input onChange={this.handleInput} className="new-category-input" type="text" value={this.state.input} />
        <input className="new-category-input" type="submit" value="Create" />
      </form>
    )
  }

function CategoriesContainer(props) {
  function renderCategories(){
    console.log("PROPS: ", props)
    return props.categories.map(category => {
      console.log("CATEACH: ", category)
      return <Category key={category.id} category={category} />
    })
  }

  return(
    <div>
      {renderCategories()}
    </div>
  )
}

如果我用数字创建它，我会得到

Warning: Each child in a list should have a unique "key" prop.

---

我还是个新手，所以希望我没有完全偏离目标，有什么想法吗？

修正了它。首先，我使用response而不是resp来更新状态，我只是将名称而不是整个对象返回给POST请求。

修复了它。首先，我使用response而不是resp来更新状态，我只是将名称而不是整个对象返回给POST请求