我正在嘗試創建一個表單供用戶提交食譜。我需要將其設置為用戶可以單擊“+”按鈕來添加更多成分或添加更多說明的位置。每個輸入旁邊還有一個“-”按鈕可以將其刪除。我基本上可以正常工作，我可以添加項目。然而，刪除這些項目似乎沒有任何一致性。我正在使用 Material UI，我不確定這是否相關。以下是我正在處理的相關代碼，我將在最后鏈接完整的代碼和框。const [ingredients, setIngredients] = React.useState(  [    {      name: "",      amount: ""    }  ]);這是我在反應中渲染數組的方式        {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>最后是處理添加/刪除項目的兩個函數  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