從輸入 React js 獲取數據后無法更新 state

Question

正如你在代碼中看到的那樣，我正在嘗試從服務器“getManuficturedProduction”獲取“ ProductionName ”並將其顯示到輸入中，之后我想獲取輸入值並將其發布到服務器但我不知道為什么我設置 state不更新，仍然顯示默認值。當我記錄我的設置 state“assignProductToProductionline”時，我可以看到我的“ ProductionName ”沒有更新

  const [assignProductToProductionline, SetAssignProductToProductionline] =
    useState({
      Id: "",
      ProductionCode: "",
      ProductionName: "",
    });

  useEffect(() => {
    loadProductionLine();
  }, []);

  const [productionLineName, SetProductionLineName] = useState([]);

  const loadProductionLine = async () => {
    const result = await axios.get(
      "url"
    );
    SetProductionLineName(result.data);
  };

  const getManuficturedProduction = async () => {
    var res = await axios.get(
      `url`
    );
    
    var GetInfo = res.data.Result;
    SetAssignProductToProductionline({
      ProductionName: `${GetInfo.Name}`,
    });
  };

  const { Id, ProductionCode, ProductionName } = assignProductToProductionline;
  const onInputChange = (e) => {
    SetAssignProductToProductionline({
      ...assignProductToProductionline,
      [e.target.name]: e.target.value,
    });
  };

  const onSubmit = async (e) => {

    await axios
      .post(
        "url",
        assignProductToProductionline
      )
      .catch(function (error) {
        if (error.response) {
          return toast.error(error.response.data);
        }
      });

    navigate("/productionLineProduct");
  };


  };
  return (
    <div className="container">
      <div className="w-75 mx-auto shadow p-5 mt-5">

        <form onSubmit={(e) => onSubmit(e)}>
          <div className="form-group">
            <select
              className="form-control form-control-md mb-2 "
              type="text"
              name="Id"
              value={Id}
              onChange={(e) => onInputChange(e)}
              autoComplete="off"
            >

              {productionLineName.map((cs) => (
                <option key={cs.Id} value={cs.Id}>
                  {cs.ProductionLineName}
                </option>
              ))}
            </select>
          </div>

          <div className="form-group mb-2">
            <input
              id="customeProductionCode"
              type="number"
              className="form-control form-control-md"
              name="ProductionCode"
              value={ProductionCode}
              onChange={(e) => onInputChange(e)}
              autoComplete="off"
              onInput={(e) => (e.target.value = e.target.value.slice(0, 9))}
            />
            <a
              className="btn btn-outline-success px-4"
              onClick={(e) => getManuficturedProduction(e)}
            >
              check it
            </a>
            <div className="mt-2">
              <input
                className="text-success w-50"
                name="ProductionName"
                defaultValue=""
                value={ProductionName}
                placeholder={ProductionName}
                onChange={(e) => onInputChange(e)}
              />
            </div>
          </div>
          <button className="btn btn-primary w-25 ">save</button>

        </form>
      </div>
    </div>
  );
};

export default AssignProductToProductionLine;
{

Answer 1

您必須使用 assignProductToProductionline.ProductionName。 這條線

const { Id, ProductionCode, ProductionName } = assignProductToProductionline;

創建一個用第一個值初始化並且永遠不會改變的常量。