当父状态被子状态更改时，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。第二次使用陈旧（先前的值）值调用它。我错过了什么？

Answer 1

在onChange你需要这样调用

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

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

Answer 2

问题出在 FlightRange input 的 onClick 回调上，请参阅下面的代码评论

onChange = {(e) => {
  setValue(e.target.value); // this is async

  // therefore, the value you are passing here is not the same as e.target.value but simply the value before setting the state
  props.handleSliderChange(value);  
}}

因此，要修复此问题，只需将 props.handleSliderChange 参数重构为 e.target.value

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

Answer 3

这是因为 child 有自己的生命周期，因为您在 child 中使用 useState。因此，无论您传递给 child 的什么道具，child 的状态都不会受到影响。

此外，您在 onChange

中传递的值不正确

解决方案：直接在child上使用props值即可（不要存储在状态中）：

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

    </>
  );
};

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

useEffect is not getting call first time when parent state is changed by child state at

javascript

reactjs

react-hooks

use-effect