javascript - 函数仅在调用两次时更新状态

Question

我有一个在单击时调用的函数来更新状态，但仅在单击两次时更新。例如，如果我单击一次，它会重复之前的更新，并且只有当我再次单击时，状态才会更新。

    const select = day => {
        let markedDay = day.dateString
        setSelected([...selected, markedDay])

        let obj = selected.reduce((c, v) => Object.assign(c, {[v]: { selected: true,  disableTouchEvent: true }}), {})

        setBooking(obj)
    }

该函数的目的是 1) 将数据收集到数组中 setSelected钩子(Hook)并 2) 使用 Object.assign 将其转换为具有新分配属性的对象和reduce 。

当函数被调用一次时，状态selected从钩子(Hook)setSelected如果第一次调用则显示为空，或者显示先前的状态。 obj 也是同样的模式。 。我希望该函数在第一次调用时更新状态，而不必调用两次。

更新

我已将函数简化为以下内容，但仍然存在同样的问题:

    const select = day => {
        let markedDay = day.dateString
        setSelected({...selected, [markedDay]: { selected: true, disableTouchEvent: true  }})
    }

该函数适用于react-native-calendars，示例为 selected将是:

  "2019-11-18": Object {
    "selected": true,
    "disableTouchEvent": true,
  }

每次选择日期时，我都希望看到上面的对象在状态上更新，但只有当我第二次单击它时，它才会更新。

Answer 1

React 中的设置状态是异步的，因此更新在下一次渲染之前不会反射(reflect)到状态。您的代码的问题是您在设置后立即使用状态的新值，但是更新的值仅在下一个组件渲染时可用。要解决此问题，您可以在将 selected 设置为 state 之前重用更新后的值:

const select = day => {
  let markedDay = day.dateString
  const newSelected = [...selected, markedDay];

  let obj = newSelected.reduce((c, v) => Object.assign(c, {
    [v]: {
      selected: true,
      disableTouchEvent: true
    }
  }), {})
  setSelected(newSelected)
  setBooking(obj);
}

或者，如果您想在 setBooking 中使用更新后的状态值，则需要在跟踪 selected< 的同时在 useEffect 内进行该调用 变量。

const select = day => {
  let markedDay = day.dateString

  setSelected([...selected, markedDay]);
}

useEffect(() => {
  let obj = selected.reduce((c, v) => Object.assign(c, {
    [v]: {
      selected: true,
      disableTouchEvent: true
    }
  }), {})

  setBooking(obj);
}, [selected])

当您有更复杂的状态时，这可能是更好的方法。