使用usestate设置状态不会调用render方法

时间:2019-08-07 08:38:48

标签: reactjs

我试图使用useState()更新类的状态,但是当我调用set函数时,不会调用该类的render方法。 同样,当我调用集合函数useEffect时,会被调用两次。

const InputSlider = (state) => {
  const [value, setValue] = useState({
    sliderValue: 0
  });
  const handleSliderChange = (event, newValue) => {
    setValue(prevState => ({
      ...prevState, 
      sliderValue: newValue
    }))
  }
  useEffect(() => {
    console.log("state updated ", value)
  });
  return(
    <Slider
      onChange={handleSliderChange}
      defaultValue={0}
      //value ={value}
      getAriaValueText={valuetext}
      aria-labelledby="discrete-slider"
      valueLabelDisplay="auto"
      min={state.state.min}
      max={state.state.max}
      step={state.state.step}
    />
  );
}

class App extends Component {
  constructor(){
    super();
    this.state = {
      sliderValue: 0
    }
  }
  render(){
    return(
      <div className ="slider">
        <InputSlider state = { this.state } />
      </div>
    )
  }
}

0 个答案:

没有答案