javascript - 从子组件更新父状态并在更新父状态时重新渲染该子组件

Question

我正在学习 React，我整天都在努力寻找解决问题的方法，但没有成功。然后决定在这里提出我的第一个问题。

我有一个子组件，包括 React-Datepicker 组件和单独的“第二天”和“前一天”按钮来更改所选日期。

SelectedDate 存储在父组件的状态中。

我试图从子组件更新父组件的状态，然后当状态更新时子组件应该重新渲染，因为这个状态作为 Prop 传递给同一个子组件。

我已设法将父状态从子状态更改为子状态，但子组件未重新呈现，因此 Datepicker 日期未更新。

我该如何解决这个问题？

下面是我没有导入行的代码。

// App.js

function App() {
  const [selectedDate, setSelectedDate] = useState(new Date())

  const incrementDate = () => {
    let next = selectedDate
    next.setDate(next.getDate() + 1)

    setSelectedDate(next)
  }

  const decrementDate = () => {
    let previous = selectedDate
    previous.setDate(previous.getDate() - 1)

    setSelectedDate(previous)
  }

  return (
    <div className="App">
      <Child 
        selectedDate={selectedDate}
        setSelectedDate={setSelectedDate}
        decrementDate={decrementDate}
        incrementDate={incrementDate} />
    </div>
  )
}

// Child.js

const Child = ({ selectedDate, setSelectedDate, decrementDate, incrementDate }) => {
  return (
    <div className='datepicker-wrapper'>
      <ArrowLeft className='date-arrow' onClick={decrementDate} />
        <DatePicker
          selected={selectedDate}
          onChange={(date) => setSelectedDate(date)}
        />
      <ArrowRight className='date-arrow' onClick={incrementDate} />
    </div>
  )
}

解决方案:

递增和递减函数的变化:

let next = new Date(selectedDate.valueOf())

let previous = new Date(selectedDate.valueOf())

Answer 1

当您使用 React 更新状态时，您应该始终创建新的状态对象，而不仅仅是改变现有状态。

  const incrementDate = () => {
    let next = new Date(selectedDate.valueOf())
    next.setDate(next.getDate() + 1)
    setSelectedDate(next)
  }

  const decrementDate = () => {
    let previous = new Date(selectedDate.valueOf())
    previous.setDate(previous.getDate() - 1)
    setSelectedDate(previous)
  }

React 进行了各种优化，以便子组件仅在状态发生变化时才重新呈现。许多 javascript 方法，如 Date.setDate() 将原地改变原始对象。简单地使用 let previous = selectedDate 分配一个新名称将不会创建一个新的 Date 对象。要创建新日期，您必须在更新程序函数中的某处使用 new Date()。