UsefieldArray 反應鈎子形式僅刪除最后一個元素

Question

我在使用反應鈎子表單 usefield 數組時遇到問題。 基本上我正在嘗試 append 並刪除，但問題是當我刪除它時只刪除最后一個元素。 append is working fine but suppose if I have 3 fields with values a,b,c and I want to remove b, when I'm pressing remove button of b then its removing c, if I try to remove a again its also removing c僅來自用戶界面。

這是我的codesandbox代碼鏈接： Codesandbox

Answer 1

我對您的代碼框進行了一些更改，這應該可以工作：

import React from "react";
import { useForm, useFieldArray, Controller, useWatch } from "react-hook-form";
import ReactDOM from "react-dom";
// import Button from '@mui/material/Button';

import "./styles.css";

let renderCount = 0;

function App() {
  const { register, control, handleSubmit, reset, watch } = useForm({
    defaultValues: {
      parameters: [{ parameterName: "" }]
    }
  });

  const {
    fields: parameterfields,
    append: appendParameters,
    remove: removeParameters
  } = useFieldArray({
    control,
    name: "parameters"
  });

  const onSubmit = (data) => console.log("data", data);

  // if you want to control your fields with watch
  // const watchResult = watch("test");
  // console.log(watchResult);

  // The following is useWatch example
  // console.log(useWatch({ name: "test", control }));

  renderCount++;

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1>Field Array </h1>
      <p>The following demo allow you to delete, append, prepend items</p>
      <span className="counter">Render Count: {renderCount}</span>
      <ul>
        {parameterfields.map((item, index) => {
          return (
            <div
              key={item.id}
              style={{ display: "flex", marginTop: 30 }}
            >
              <div style={{ width: "90%", marginRight: 20 }}>
                <Controller
                  name={`parameters.${index}.parameterName`}
                  control={control}
                  render={({ field: { onChange, value } }) => (
                    <div>
                      {console.log(item.parameterName)}
                      <input
                        name={`parameters[${index}].parameterName`}
                        variant="standard"
                        InputProps={{
                          disableUnderline: true
                        }}
                        // className={styles.title}
                        onChange={onChange}
                        defaultValue={item.parameterName}
                        placeholder="Parameter Name"
                      />
                    </div>
                  )}
                />
              </div>
              <div>
                <button
                  onClick={() => removeParameters(index)}
                  sx={{ width: 130, height: 50 }}
                  variant="outlined"
                >
                  Remove
                </button>
              </div>
            </div>
          );
        })}
      </ul>
      <section>
        <button
          type="button"
          onClick={() => {
            appendParameters({ 
              date: new Date(),
              parameterName: "" });
          }}
        >
          append
        </button>
      </section>

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);