从子组件更新父状态，并在父状态为“更新”时重新渲染此子组件

Question

我正在学习如何应对，我整天都在试图找到解决问题的办法，但都没有成功。然后决定在这里提出我的第一个问题。

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

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

我试图从子组件更新父组件的状态，当状态更新时，子组件应该重新呈现，因为该状态作为道具传递给同一个子组件。

我已设法从child更改父状态，但子组件未重新呈现，因此日期选择器日期未更新。

我应该如何解决这个问题？

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

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

我也遇到了同样的问题，我用一个额外的函数来计算它，它从孩子那里获取值，然后用它更新状态，而且用console.log很容易跟踪它。您可以将其视为中间件。试试看：

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

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

    setSelectedDate(next)
  }
  const onDateChane = (date) => {
    console.log(date)
    setSelectedDate(date)
    }
    
  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>
  )
}

Answer 2

子组件没有呈现，因为您忘记添加use效应钩子。

 import React,{useEffect} from 'react'

    const Child = ({ selectedDate, setSelectedDate, decrementDate, incrementDate }) => {
     useEffect(()=>{},[selectedDate]);
      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>
      )
    }

Answer 3

使用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（），会使原始对象发生变异。简单地用让以前的=selectedDate分配一个新名称不会创建一个新的Date对象。要创建一个新的Date，您必须在updater函数中的某个地方使用new Date（）。