Блог

Главная - Вопросы по программированию - Реагировать. Состояние не изменяется после изменения выбора

Реагировать. Состояние не изменяется после изменения выбора

#reactjs #react-hooks

#reactjs #реагирующие хуки

Вопрос:

В этом случае я изменяю элемент выбора и вызываю метод обновления данных. Метод принимает значения из состояния. Но оказывается, что при обновлении данных состояние еще не было изменено. Когда вы снова вызываете обновление данных, состояние уже обновлено Как правильно выполнить обновление?

Реагирующий компонент

   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>
  );

Ответ №1:

Для меня в вашем коде есть несколько факторов «что». На этот раз у вас есть функция с именем loadData, которая выполняет POST …

Еще одна вещь, которую я видел, это;

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

имеет bind , я не думаю, что это необходимо, вместо этого я бы изменил его на

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

Основная проблема.

кроме того, когда вы выполняете изменения состояния, а затем вызываете функцию, изменение состояния может не обновляться при вызове выборки.

 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>
  );

Комментарии:

1. что не так с привязкой? Где я читал, это было рекомендовано для передачи событий.

2. Передача параметра методу, конечно, является решением. Но я хотел бы понять и понять, в чем проблема и как решить эту проблему через состояние

3. Когда вы обновляете состояние, весь компонент должен быть повторно представлен для установки нового состояния. Когда вы запускаете функцию сразу после этого, состояние minPaid еще не изменилось. Итак, теоретически вы вызываете функцию со старым значением.

4. Связывание было тем, что мы делали, когда class component был способом создания компонентов с полным состоянием. Теперь, когда у нас есть функциональные компоненты, которые также могут использовать состояние. Нам не нужно связывать наши события onChange с этим.

Ответ №2:

Вместо этого вы можете изменить setMinPaid(parseInt(selectedOption.value)) на setMinPaid(parseInt(selectedOption.target.value)) .