Question

当功能组件更新道具时，在对picker元素进行另一次更改之前，父级的状态不会获得新值。

它是这样的：

选择器加载日期为A

=>我选择日期B。

=>选择器呈现日期B，但父状态显示日期A的selectedDate。

=>我选择日期C。

=>选择器呈现日期C，但父状态显示日期B的selectedDate。

父级（有状态组件）：

constructor(props) {
  super(props);
        this.state = { selectedDate: new Date() }   // initializes state
    }

handleDateChange = date => {
        this.setState({ selectedDate: date })   // receives date and updates state
    };

componentDidUpdate() {
        console.log('component did update :', this.state);   // one step behind child state
    };

render() {
  return(
    <DatePicker
        selectedDate={this.state.selectedDate}
        handleDateChange={this.handleDateChange}/>
)}

子级（功能组件）：

export default function DatePicker(props) {
  const [selectedDate, setSelectedDate] = React.useState(props.selectedDate);

  const handleDateChange = date => {
        console.log(date)   // shows the correct date

        setSelectedDate(date);                 // updates child state
        props.handleDateChange(selectedDate);  // updates parent state
    };

  return (
        <KeyboardDatePicker
          value={selectedDate}
          onChange={handleDateChange}/>
  )}

Answer 1

如果您想保证孩子的selectedDate发生变化时会发生某些事情，可以随时使用效果。

我们的useEffect钩子将在修改selectedDate或handleDateChange时运行该函数。

export default function DatePicker(props) {
  const [selectedDate, setSelectedDate] = React.useState(props.selectedDate);
  const { handleDateChange } = props;

  useEffect(() => {
    handleDateChange(selectedDate);
  }, [selectedDate, handleDateChange])

  const handleChange = date => {
    setSelectedDate(date);
  };

  return (
    <KeyboardDatePicker
      value={selectedDate}
      onChange={handleChange}
    />
  )
}

React Hook更新父状态落后一步

1 个答案: