反应：SELECT 来自 MYSQL

Question

我是一个新用户，也是 React 世界的新手。我需要帮助来解决 Select 的值来自 mysql 数据库的情况。我收到了这些值，但是 select 进入无限循环。

错误肯定在这个文件中，因为 server.js 可以正常工作！！非常感谢您的帮助，如果这是一个愚蠢的问题，我们深表歉意。我从一周开始学习反应，我还没有在互联网上找到答案

function FormAddMenu({ registerMenu }) {
  const [nomeMenuReg, setNomeMenuReg] = useState("");
  const [descrizioneMenuReg, setDescrizioneMenuReg] = useState("");
  const [prezzoMenuReg, setPrezzoMenuReg] = useState("");
  const [disponibilitaMenuReg, setDisponibilitaMenuReg] = useState("");
  const [portataMenuReg, setPortataMenuReg] = useState("");
  const [addMenu, setAddMenu] = useState({
    portataMenuReg: "",
    nomeMenuReg: "",
    descrizioneMenuReg: "",
    prezzoMenuReg: "",
    disponibilitaMenuReg: "",
  });
  const [portate, setPortate] = useState({ value: "", label: "" });

  const selectOptions = async () => {
    Axios.post("http://localhost:3001/selectPortata").then((response) => {
      //   console.log("risposta:",response.data)
      setPortate(
        response.data.map((risp) => ({
          ...setPortate,
          value: risp.value,
          label: risp.label,
        })),
      );
    });
  };

  selectOptions();

  console.log("portate:", portate);

  const submitHandler = (e) => {
    e.preventDefault();
    registerMenu(addMenu);
    document.getElementById("addmenu").reset();
  };

  const handleCheckbox = (e) => {
    console.log(e.target.checked);
    if (e.target.checked === true) {
      setAddMenu({ ...addMenu, disponibilitaMenuReg: 1 });
    } else {
      setAddMenu({ ...addMenu, disponibilitaMenuReg: e.target.value });
    }
  };

  return (
    <div className="container width85">
      <h1>CREA IL MENU'</h1>
      <form id="addmenu">
        <div className="mb-3">
          <label htmlFor="portataMenuReg" className="form-label">
            PORTATA
          </label>
          <Select
            options={portate}
            onChange={(e) => setAddMenu({ ...addMenu, portataMenuReg: e.target.value })}
            className="mb-3"
          />
        </div>
        <div className="mb-3">
          <label htmlFor="nomeMenuReg" className="form-label">
            NOME
          </label>
          <input
            type="text"
            onChange={(e) => setAddMenu({ ...addMenu, nomeMenuReg: e.target.value })}
            className="form-control"
            id="nomeMenuReg"
            rows="3"
          />
        </div>
        <div className="mb-3">
          <label htmlFor="descrizioneMenuReg" className="form-label">
            DESCRIZIONE
          </label>
          <textarea
            className="form-control"
            onChange={(e) =>
              setAddMenu({ ...addMenu, descrizioneMenuReg: e.target.value })
            }
            id="descrizioneMenuReg"
            rows="3"
          ></textarea>
        </div>
        <div className="mb-3">
          <label htmlFor="prezzoMenuReg" className="form-label">
            PREZZO
          </label>
          <input
            type="text"
            className="form-control"
            onChange={(e) => setAddMenu({ ...addMenu, prezzoMenuReg: e.target.value })}
            id="prezzoMenuReg"
            rows="3"
          />
        </div>
        <div className="mb-3">
          <label htmlFor="disponibilitaMenuReg" className="form-label">
            DISPONIBILITA'
          </label>
          <input
            type="checkbox"
            value="0"
            className="htmlForm-control"
            onChange={handleCheckbox}
            id="disponibilitaMenuReg"
            rows="3"
          />
        </div>
        <div className="mb-3">
          <button type="submit" onClick={submitHandler} className="btn btn btn-danger">
            AGGIUNGI AL MENU
          </button>
        </div>
      </form>
    </div>
  );
}

export default FormAddMenu;

Answer 1

结束 selectOptions(); 调用 in an useEffect (since loading data and mutating state based on it is a side effect)。

空的依赖数组（上面记录的）意味着效果只在挂载时执行一次。

React.useEffect(() => {
  selectOptions();
}, []);

反应：SELECT 来自 MYSQL

REACT: SELECT from MYSQL

javascript

sql

select

reactjs