为什么我不能在 React 中更改我的输入值？

Question

我正在做一个食谱项目，我希望用户添加一个食谱。

我将通过输入添加数据，但我无法对“视频 URL”和“ingCount”输入进行任何更改。 我不明白为什么会这样。 其他输入工作正常，并且工作顺利。 .

我只是无法在ingCount 和 videoLink 中输入值。

*** 他们在 API 上的名字也是正确的。

const [addRecipe, setAddRecipe] = useState({
    id: "",
    title: "",
    description: "",
    image: "",
    category: "",
    time: 0,
    ingCount: 0,
    servings: 0,
    videoLink: "",
    ingredients: "",
    makeDetails: ""
  })

  const handleChange = (e) => {
    setAddRecipe({
      id: Math.random() * 100,
      ...addRecipe,
      [e.target.name]: e.target.value
    })
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    setRecipes([...recipes, addRecipe])
    axios
      .post(
        "https://5fccb170603c0c0016487102.mockapi.io/api/recipes",
        addRecipe
      )
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
    setAddRecipe(addRecipe)
    console.log(handleSubmit)
  }

<form onSubmit={handleSubmit}>
          <div>
            <input
              type="text"
              name="title"
              value={addRecipe.title}
              onChange={handleChange}
              placeholder="baslik giriniz"
            />
          </div>
          <div>
            <input
              type="text"
              name="description"
              value={addRecipe.description}
              onChange={handleChange}
              placeholder="tarif aciklamasi"
            />
          </div>
          <div>
            <input
              type="text"
              name="category"
              value={addRecipe.category}
              onChange={handleChange}
              placeholder="kategori"
            />
          </div>
          <div>
            <input
              type="number"
              name="time"
              value={addRecipe.time}
              onChange={handleChange}
              placeholder="süre"
            />
          </div>
          <div>
            <input
              type="number"
              name="malzeme"
              value={addRecipe.ingCount}
              onChange={handleChange}
              placeholder="malzeme sayısı"
            />
          </div>
          <div>
            <input
              type="number"
              name="servings"
              value={addRecipe.servings}
              onChange={handleChange}
              placeholder="kişilik"
            />
          </div>

          <div>
            <input
              type="text"
              name="ingredients"
              value={addRecipe.ingredients}
              onChange={handleChange}
              placeholder="malzemeler"
            />
          </div>
          <div>
            <input
              type="text"
              name="makeDetails"
              value={addRecipe.makeDetails}
              onChange={handleChange}
              placeholder="yapilisi"
            />
          </div>
          <div>
            <input
              type="text"
              name="image"
              value={addRecipe.image}
              onChange={handleChange}
              placeholder="resim"
            />
          </div>
          <div>
            <input
              type="text"
              name="video"
              value={addRecipe.videoLink}
              onChange={handleChange}
              placeholder="video"
            />
          </div>
          <button className="todoform__btn" type="submit">
            Tarifi ekle!
          </button>
        </form>

Answer 1

这些是name与value属性不匹配的仅有的两个字段。 对于ingCount ，您将malzeme作为名称。 对于videoLink ，您以video作为名称。

所以对于那些，当

    setAddRecipe({
      id: Math.random() * 100,
      ...addRecipe,
      [e.target.name]: e.target.value
    })
    

被调用时，您正在设置一个永远不会使用的属性。

Answer 2

输入字段中的名称必须与 object 名称相同。 目前对于这些不同->

       <input
          type="text"
          name="video". //should be video Link
          value={addRecipe.videoLink}
          onChange={handleChange}
          placeholder="video"
        />

更新这个它将解决您的问题。 另外我会建议你在 setState 中使用回调。 否则所有字段可能不会保存在 state 中。

setState (prev => ({...prev, key: value})

Answer 3

您正在使用“名称”属性设置 state 值，对于 ingCount 和视频，输入字段中的“名称”属性与 state 不同，因此它没有得到更新。

 <input type="number" name="ingCount" value={addRecipe.ingCount} onChange={handleChange} placeholder="malzeme sayısı" /> <input type="text" name="videoLink" value={addRecipe.videoLink} onChange={handleChange} placeholder="video" />