javascript - 仅更新我更改其他状态的日期不应更新或更改 ReactJS/React-Hooks

Question

通过 react 钩子(Hook)的新概念，我想发布一些我正在使用 useState future 的数据，所以当我更改日期时，其他日期也会更新我选择的内容。我希望它仅更新相关日期。如果我更改 planRegisterStartDate 以便其他人不会影响我该怎么做我使用react-datepicker包

const [planGroupData, setPlanGroupData] = useState({
    planGroupName: '',
    PlanGroupYear: '',
    planRegisterStartDate: new Date(),
    planRegisterFinishDate: new Date(),
    projeRegisterStartDate: new Date(),
    projeRegisterFinishDate: new Date()
  })

  const onPlanGroupDateChange = date => {
    setPlanGroupData({
      planRegisterStartDate: date,
      planRegisterFinishDate: date,
      projeRegisterStartDate: date,
      projeRegisterFinishDate: date
    })
  }
const {
    PlanGroupYear,
    planGroupName,
    planRegisterFinishDate,
    planRegisterStartDate,
    projeRegisterFinishDate,
    projeRegisterStartDate
  } = planGroupData

 return (
 <div className='form-row'>
          <DatePicker
            selected={planRegisterStartDate}
            onChange={onPlanGroupDateChange}
          />
 <DatePicker
            selected={planRegisterFinishDate}
            onChange={onPlanGroupDateChange}
          />
        </div>
)

Answer 1

您可以分离状态并单独定义集合函数，然后可以在各自的组件中调用这些函数。我认为这会更容易管理。

const [planGroupName, setPlanGroupName] = useState(null)
const [planGroupYear, setPlanGroupYear] = useState(null)
const [planRegisterStartDate, setPlanRegisterStartDate] = useState(new Date())
const [planRegisterFinishDate, setPlanRegisterFinishDate] = useState(new Date())
const [projeRegisterStartDate, setProjeRegisterStartDate] = useState(new Date())
const [projeRegisterFinishDate, setProjeRegisterFinishDate] = useState(new Date())


<DatePicker selected={planRegisterStartDate}
            onChange={date => setPlanRegisterStartDate(date)} />
<DatePicker selected={planRegisterFinishDate} 
             onChange={date => setPlanRegisterFinishDate(date)} />