為什么我不能在 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" />