Typescript 如何在reactdatepicker中避免在 Select 日期范围的结束日期之前更新状态

我有一个有点复杂的应用程序，其中我正在根据用户输入值制作图表.他们 Select 开始日期和结束日期，以及另一个参数.当这个额外的参数被填充时，它呈现图表.问题是，当用户需要编辑react-datepicker,the start date and end date chosen are updated individually中的日期时，它会更新开始日期，并在用户 Select 结束日期之前将结束日期重置为空，从而导致应用程序出错.我需要弄清楚如何修改状态更新，这样用户就有机会在重新呈现图表之前编辑日期时 Select 一个结束日期.

父零部件:

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.unit != 'None'时，它将显示OutageHistoryChart分量.因此，在它首次成功创建并显示图表后，当用户返回编辑日期时，在日期选取器中第一次单击时，它会将状态更新为如下所示:

parameters = {
  startDate: <user's new date>,
  endDate: null,
  unit: 'Unit 1'
}

由于更新后的状态仍然包含有效值parameters.unit，因此它通过了Return语句中的测试，并try 重新呈现图表.我知道我可以在显示图表之前添加一个额外的测试parameters.endDate != null，这可能会修复它，但是，似乎我应该可以在这里使用useEffect.这就是我try 过的，但在编辑日期范围时跳过了useEffect，并且由于缺少结束日期，它再次无法呈现图表.

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])

  //more stuff

然后，我在Return语句中将其更改为:

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

在这种情况下，useEffect不是一个有效的解决方案，还是我只是实施错误了？只是在我的报税单上做parameter.unit != 'None' && parameter.endDate != null这样的判断看起来很混乱.