如果有人可以帮助我优化以下代码。我正在尝试创建一个注册页面，用户可以在其中选择所选日期的可用时间。用户可以选择同一天的多行。codesandbox 的链接是https://codesandbox.io/s/react-hook-helper-availability-0r6bd?file=/src/Second.js。虽然我已经实现了这一点，但可以进一步优化，因为我在不同的日子使用相同的代码。我正在重用相同的代码。我只添加了星期一和星期二，以防我必须使用星期一到星期六，然后我将不得不重复相同的代码，并在几个字段中进行更改。

  const [monday, setMonday] = useState([{ FROM: "", TO: "" }]);
  const [tuesday, setTuesday] = useState([{ FROM: "", TO: "" }]);

  const [time, setTime] = useState([
    { Id: "00:30", value: "00:30" },
    { Id: "01:00", value: "01:00" },
    { Id: "01:30", value: "01:30" },
    { Id: "02:00", value: "02:00" },
......
let timeList =
    time.length > 0 &&
    time.map((item, i) => {
      return (
        <>
          <option key={item.Id} value={item.id}>
            {item.value}
          </option>
        </>
      );
    }, this);

添加，删除操作

const handleInputChangeForMonday = (e, index) => {
    const { name, value } = e.target;
    const list = [...monday];
    list[index][name] = value;
    setMonday(list);
  };

  // handle click event of the Remove button
  const handleRemoveClickForMonday = (index) => {
    const list = [...monday];
    list.splice(index, 1);
    setMonday(list);
  };

  // handle click event of the Add button
  const handleAddClickForMonday = () => {
    setMonday([...monday, { FROM: "", TO: "" }]);
  };

  // handle input change
  const handleInputChangeForTuesday = (e, index) => {
    const { name, value } = e.target;
    const list = [...tuesday];
    list[index][name] = value;
    setTuesday(list);
  };

  // handle click event of the Remove button
  const handleRemoveClickForTuesday = (index) => {
    const list = [...tuesday];
    list.splice(index, 1);
    setTuesday(list);
  };

  // handle click event of the Add button
  const handleAddClickForTuesday = () => {
    setTuesday([...tuesday, { FROM: "", TO: "" }]);
  };

现在这是重复的代码。

<form onSubmit={onSubmit}>
        {monday.map((x, i) => {
          return (
            <React.Fragment>
              <select
                name="FROM"
                value={x.FROM}
                onChange={(e) => handleInputChangeForMonday(e, i)}
              >
                <option selected hidden>
                  From
                </option>
                {timeList}
              </select>
              &nbsp;&nbsp;&nbsp;
              <select
                name="TO"
                value={x.TO}
                onChange={(e) => handleInputChangeForMonday(e, i)}
                placeholder="select your Institute"
              >
                <option selected hidden>
                  TO
                </option>
                {timeList}
              </select>
              <div style={{ textAlign: "left", width: "84%" }}>
                {monday.length !== 1 && (
                  <label
                    as="a"
                    onClick={() => handleRemoveClickForMonday(i)}
                    style={{ marginRight: "10px" }}
                  >
                    remove
                  </label>
                )}

                {monday.length - 1 === i && (
                  <button
                    type="button"
                    as="a"
                    onClick={handleAddClickForMonday}
                    style={{ marginRight: "10px" }}
                  >
                    add
                  </button>
                )}
              </div>
            </React.Fragment>
          );
        })}
        <br />
        <br />

        {tuesday.map((x, i) => {
          return (
            <React.Fragment>
              &nbsp;&nbsp;&nbsp;
              <select
                name="FROM"
                value={x.FROM}
                onChange={(e) => handleInputChangeForTuesday(e, i)}
              >
                <option selected hidden>
                  From
                </option>
                {timeList}
              </select>
              &nbsp;&nbsp;&nbsp;
              <select
                name="TO"
                value={x.TO}
                onChange={(e) => handleInputChangeForTuesday(e, i)}
                placeholder="select your Institute"
              >
                <option selected hidden>
                  TO
                </option>
                {timeList}
              </select>
              <div style={{ textAlign: "left", width: "84%" }}>
                {tuesday.length !== 1 && (
                  <label
                    as="a"
                    onClick={() => handleRemoveClickForTuesday(i)}
                    style={{ marginRight: "10px" }}
                  >
                    remove
                  </label>
                )}

                {tuesday.length - 1 === i && (
                  <button
                    type="button"
                    as="a"
                    onClick={handleAddClickForTuesday}
                    style={{ marginRight: "10px" }}
                  >
                    add
                  </button>
                )}