我正在嘗試創(chuàng)建一個(gè)表單供用戶提交食譜。我需要將其設(shè)置為用戶可以單擊“+”按鈕來(lái)添加更多成分或添加更多說(shuō)明的位置。每個(gè)輸入旁邊還有一個(gè)“-”按鈕可以將其刪除。我基本上可以正常工作，我可以添加項(xiàng)目。然而，刪除這些項(xiàng)目似乎沒(méi)有任何一致性。我正在使用 Material UI，我不確定這是否相關(guān)。以下是我正在處理的相關(guān)代碼，我將在最后鏈接完整的代碼和框。const [ingredients, setIngredients] = React.useState(  [    {      name: "",      amount: ""    }  ]);這是我在反應(yīng)中渲染數(shù)組的方式        {ingredients.map((ing, idx) => {          return (            <div key={idx}>              <TextField                id={"ing-name-" + idx}                name={"ing-name-" + idx}                variant="outlined"                label="Ingrediant Name"                value={ing.name}                required                onChange={handleIngredientChange}              />              <TextField                id={"ing-amt-" + idx}                name={"ing-amt-" + idx}                variant="outlined"                label="Ingredient Amount"                value={ing.amount}                required                onChange={handleIngredientChange}              />              <Button                id={"ing-remove-" + idx}                variant="contained"                color="secondary"                type="button"                onClick={handleIngredientRemove}              >-</Button>            </div>          )        })}        <Button          variant="contained"          color="primary"          type="button"          onClick={handleIngredientAdd}        >+</Button>最后是處理添加/刪除項(xiàng)目的兩個(gè)函數(shù)  function handleIngredientRemove(event) {    /*    * To remove an element, we just use the array.filter function to genereate a new array without the     * element being deleted    */    console.log(event.target.id);    let idx = parseInt(event.target.id.split("-")[2]);    console.log("Removing ingredient " + idx);    let newIngredients = ingredients.filter((ingredient, index) => idx !== index);    setIngredients(newIngredients);      }完整的codesandbox演示https://codesandbox.io/s/happy-herschel-k0oqf