i a new user and a new in React world. I need help to solve this situation about a Select with values from mysql DB. I receive the values, but the select goes in infinite loop.

The error is surely in this file cause server.js works without problem!! Really thanks for the help, and sorry if it could be a stupid question. I m studying react from one week and i have not found answers on internet

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;

CodePudding user response：

Wrap the selectOptions(); call in an useEffect (since loading data and mutating state based on it is a side effect).

The empty dependency array (documented above) means the effect is only executed once on mount.

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