反应更改选择后状态不会更改

Question

在这种情况下，我更改选择元素并调用数据更新方法。该方法从状态获取值。但是当数据更新时，状态还没有改变。当您再次调用数据更新时，状态已经更新了如何正确进行更新？

反应成分

  const [dataList, setdataList] = useState([]);
  const [isLoding, setIsLoading] = useState(false);
  const [minPaid, setMinPaid] = useState(0);

  const dataSelectList = [
    { label: "2", value: "20000000" },
    { label: "3", value: "30000000" },
    { label: "4", value: "40000000" },
    { label: "5", value: "50000000" },
    { label: "10", value: "100000000" },
  ];

  const LoadData = () => {
    setIsLoading(true);

    fetch("url", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        paid: minPaid,
      }),
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setIsLoading(false);
        if (data.success)
            setdataList(data.list);
      });
  };

  

  const onChange = (selectedOption) => {
    setMinPaid(parseInt(selectedOption.value));
    LoadData();
  };

  return (
    <div>      
        <Select              
          options={dataList}
          onChange={onChange.bind(this)}
        />          
    </div>
  );

Answer 1

您可以将setMinPaid（parseInt（selectedOption.value））改为setMinPaid（parseInt（selectedOption.target.value））。

Answer 2

你的代码对我来说有多个“什么”因素。这一次，您有一个名为loadData的函数，它执行POST。。。

我看到的另一件事是；

<Select              
          options={dataList}
          onChange={onChange.bind(this)}
        />   

有一个绑定，我认为没有必要，相反，我会将其更改为

<Select              
          options={dataList}
          onChange={onChange}
        />   

另外，当您执行状态更改，然后调用函数时，在调用fetch时，状态更改可能不会更新。

const onChange = (selectedOption) => {
    setMinPaid(parseInt(selectedOption.value));
    LoadData();
  };

因此，我认为最好将该值传递给LoadData函数，如下所示：

 const [dataList, setdataList] = useState([]);
  const [isLoding, setIsLoading] = useState(false);
  const [minPaid, setMinPaid] = useState(0);

  const dataSelectList = [
    { label: "2", value: "20000000" },
    { label: "3", value: "30000000" },
    { label: "4", value: "40000000" },
    { label: "5", value: "50000000" },
    { label: "10", value: "100000000" },
  ];

  const LoadData = (minPaid) => {
    setIsLoading(true);

    fetch("url", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        paid: minPaid,
      }),
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setIsLoading(false);
        if (data.success)
            setdataList(data.list);
      });
  };

  

  const onChange = (selectedOption) => {
    setMinPaid(parseInt(selectedOption.value));
    LoadData(parseInt(selectedOption.value));
  };

  return (
    <div>      
        <Select              
          options={dataList}
          onChange={onChange}
        />          
    </div>
  );