javascript - 当父状态被子状态更改时，useEffect 没有第一次被调用

Question

子组件

export const FlightRange = (props) => {
  const [value, setValue] = useState(props.value);
  return (
    <>
      <input
        type='range'
        min={1000}
        max={50000}
        step="500"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
          props.handleSliderChange(value);
        }}
      />
      <span>{value}</span>

    </>
  );
};

父组件

useEffect(() => {
    const result = axios.get('http://localhost:8000/')
    .then((res) => res.json())

    .then((data) => {
      const flightData = data.filter((value) => {
        return (
          valuesplit(' ')[1] < priceSlider
        );
      });
    })
  }, [priceSlider]);

return(
    <Child value={priceSlider} handleSliderChange={(value)=> setPriceSlider(value)} />
 )

第一次更改滑块时不会调用 useEffect。它被第二次调用，并带有陈旧的（以前的值）值。我错过了什么？

标签： javascriptreactjsreact-hooksuse-effect

Answer 1

在onChange你需要这样打电话

onChange={(e) => {
          setValue(e.target.value);
          props.handleSliderChange(e.target.value);
        }}

由于调用时值不会立即更新setValue(e.target.value);，value因此将具有您传入的先前值props.handleSliderChang(value)
以了解其setState工作原理请参阅此答案