React Hook 更新父状态落后一步

Question

当功能组件更新 prop 时，父级状态不会获得新值，直到对选择器元素进行另一次更改。

它是这样的：

选择器加载日期 A。

=> 我选择日期 B。

=> Picker 呈现日期 B 但父状态显示日期 A 的 selectedDate。

=> 我选择日期 C。

=> Picker 呈现日期 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更改时发生某些事情，您始终可以使用效果。

只要selectedDate或handleDateChange被修改，我们这里的useEffect挂钩就会运行该函数。

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}
    />
  )
}