javascript - "React has detected a change in the order of Hooks"但 Hooks 似乎按顺序调用

Question

我正在尝试通过 React 的钩子(Hook)使用 Context 和 Reducers，但遇到了钩子(Hook)顺序不固定的问题。我的理解是，只要 useHook(…) 的顺序保持不变，就可以在任何类型的控制流中调用返回的状态/更新函数/reducer。否则，我将在 FunctionComponents 的最开始调用 Hook 。

是不是我在循环中生成Days？还是遗漏了什么？

Warning: React has detected a change in the order of Hooks
called by Container. This will lead to bugs and errors if not fixed. For
more information, read the Rules of Hooks:
https://reactjs.org/docs/hooks-rules.html

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. undefined                  useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Container 的完整版本如下。下面是 Day 的摘录，并且有来自 react-dnd 的 useDrop 的引用。

export const Container: FunctionComponent<Props> = () => {
  let events = useContext(State.StateContext)
  //let events: Array<Event.Event> = [] <- with this, no warning

  const getDaysEvents = (day: Event.Time, events: Array<Event.Event>) => {
    return events.map(e => {
      const isTodays = e.startTime.hasSame(day, "day")
      return isTodays && Event.Event({ dayHeight, event: e })
    })
  }

  let days = []
  for (let i = 0; i < 7; i++) {
    const day = DateTime.today().plus({ days: i })
    days.push(
      <Day key={day.toISO()} height={dayHeight} date={day}>
        {getDaysEvents(day, events)}
      </Day>
    )
  }
  return <div className="Container">{days}</div>
}

Day 的摘录(Event 同样使用 useDrag Hook ，也像此处一样在顶层调用)。

const Day: FunctionComponent<DayProps> = ({ date, height, children }) => {
  const dispatch = useContext(State.DispatchContext)
  const [{ isOver, offset }, dropRef] = useDrop({
    // …uses the dispatch function within…
    // …
  })
  // …
}

Answer 1

由于使用短路逻辑，我在编写的组件中遇到了同样的错误消息。

这导致了一个错误:

const x = useSelector(state => state.foo);
if (!x) { return ; }
const y = useSelector(state => state.bar);

这是因为当 x 为真时，钩子(Hook)列表的长度为 2，但当 x 为假时，列表的长度为 1。

为了解决这个错误，我必须在任何提前终止之前使用所有钩子(Hook)。

const x = useSelector(state => state.foo);
const y = useSelector(state => state.bar);
if (!x) { return ; }