React-Datepicker日期范围选择时如何避免提前更新状态触发图表报错？

我开发了一个基于用户输入生成图表的React应用，用户需要选择开始日期、结束日期及另一参数，当所有参数填写完成后渲染图表。现在遇到的问题是：使用react-datepicker编辑日期时，组件会单独更新开始日期并将结束日期重置为null，此时因为unit参数仍有效，会触发图表重渲染导致报错。我尝试通过useEffect控制图表显示状态但未成功，想咨询是useEffect不适用、实现有误，还是有更优的解决方案。

父组件代码 #

export const OutagePanel: FC<propTypes> = (props) => {
  const [parameters, setParameters] = useState({
    startDate: null,
    endDate: null,
    unit: 'None'
  })

  const handleDateChange = (range) => {
    const [startDate, endDate] = range;
    setParameters( (prevState) => ({
      ...prevState,
      startDate: startDate,
      endDate: endDate
    }))
  }

  const handleUnitChange = (value) => {
    setParameters( (prevState) => ({
      ...prevState,
      unit: value
    }))
  }

  return (
    <Flex>
      <Flex>
        <Box>Date Range:</Box>
        <Box>
          <DatePicker
            className={styles.datepicker}
            placeholderText="Click to select"
            selected={parameters.startDate}
            startDate={parameters.startDate}
            endDate={parameters.endDate} 
            onChange={handleDateChange}
            showMonthDropdown
            showYearDropdown
            dropdownMode="select"
            minDate={new Date(2000, 0, 1)}
            maxDate={new Date(2021, 0, 5)}
            todayButton="Today"
            selectsRange
          />
        </Box>
      </Flex>
      <GeneratorUnitSelect handleUnitChange={handleUnitChange} />
      {parameters.unit != 'None' && <OutageHistoryChart parameters={parameters}></OutageHistoryChart>}
    </Flex>
  )
}

编辑日期时的状态变化 #

编辑日期时，parameters状态会变为：

parameters = {
  startDate: <用户选择的新日期>,
  endDate: null,
  unit: 'Unit 1'
}

尝试的useEffect方案（未解决） #

我尝试添加useEffect控制showChart状态，但仍报错：

export const OutagePanel: FC<propTypes> = (props) => {
  const [parameters, setParameters] = useState({
    startDate: null,
    endDate: null,
    unit: 'None'
  })

  const [showChart, setShowChart] = useState(false)
    
  const handleDateChange = (range) => {
    const [startDate, endDate] = range;
    setParameters( (prevState) => ({
      ...prevState,
      startDate: startDate,
      endDate: endDate
    }))
  }

  useEffect(() => {
    if (parameters.unit != 'None' && parameters.endDate != null) {
      setShowChart(true)
    } else (
      setShowChart(false)
    )
  }, [parameters.startDate, parameters.endDate, parameters.unit])

  // 其他代码
}

返回语句改为：

{showChart && <OutageHistoryChart parameters={parameters}></OutageHistoryChart>}

解决方案 #

1. 直接完善渲染条件（最简单有效） #

不需要额外维护showChart状态，直接在渲染图表的条件里同时校验unit不为'None'、startDate和endDate都不为null，从根源避免不完整参数触发图表渲染：

{parameters.unit !== 'None' && parameters.startDate !== null && parameters.endDate !== null && 
  <OutageHistoryChart parameters={parameters} />
}

2. 修复useEffect实现（如果坚持用状态控制） #

如果一定要用showChart状态，需要修正两个问题：

• 依赖项无需startDate，但判断逻辑必须包含它
• 简化赋值逻辑，直接用条件的布尔值

修改后的useEffect：

useEffect(() => {
  setShowChart(
    parameters.unit !== 'None' && 
    parameters.startDate !== null && 
    parameters.endDate !== null
  );
}, [parameters.unit, parameters.startDate, parameters.endDate]);

3. 可选：优化日期选择器的状态更新逻辑 #

可以在handleDateChange里增加判断，只有当用户选完完整的日期范围（startDate和endDate都存在）时才更新状态，避免中间状态触发渲染：

const handleDateChange = (range) => {
  const [startDate, endDate] = range;
  // 仅当两个日期都选好时才更新状态
  if (startDate && endDate) {
    setParameters(prevState => ({
      ...prevState,
      startDate,
      endDate
    }));
  }
};

为什么之前的useEffect方案无效？ #

之前的逻辑只校验了unit和endDate，漏掉了startDate的判断。当用户编辑日期时，哪怕endDate变为null会把showChart设为false，但如果出现startDate为null但endDate存在的极端交互场景，依然会导致图表接收到不完整参数而报错，所以必须同时校验两个日期的有效性。

内容的提问来源于stack exchange，提问作者MKF