似乎无法将 return 的 React 自定义挂钩直接传递给 React 上下文

Question

我在构建 React 应用程序时经常遵循的模式是创建一个自定义 React 钩子，该钩子 returns 向我提供状态数据，然后将这些状态值分配给 React 上下文，这样我就可以在我的环境中访问它们组件层次结构。代码通常如下所示：

  const { notesData, notesDataError } =
    useNotes();
  const contextValue = { notesData, notesDataError };

  return (
      <NotesContext.Provider value={contextValue}>
        <NoteList />
      </NotesContext.Provider>
  );

我想我可以缩短但只是传递从 useNotes() 返回的内容并将其分配给 contextValue 而不必显式命名每个属性

当我尝试这样做时（参见下面的代码），值似乎没有通过。我希望顶部代码的行为与底部代码相同，但相反，我对 notesData 的值是未定义的，我认为这意味着因为属性没有通过。

  const contextValue = useNotes();

  return (
      <NotesContext.Provider value={contextValue}>
        <NoteList />
      </NotesContext.Provider>
  );

有人可以告诉我如何让这些价值观通过而不必一一列举吗？

Answer 1

我不确定为什么您尝试的操作不起作用，但这里有一个解决方法应该可以满足您的需求：

（使用扩展运算符创建新对象）

  const contextValue = useNotes();

  return (
      <NotesContext.Provider value={{...contextValue}}>
        <NoteList />
      </NotesContext.Provider>
  );

而且我不确定此解决方法的效率，但它应该与手动解构每个键并创建新对象相同（如果不是更快的话）

Answer 2

这个例子确实有效。我是问题的发布者，我没有在自定义挂钩中正确初始化状态数据。

似乎无法将 return 的 React 自定义挂钩直接传递给 React 上下文

Can't seem to pass return of React custom hook directly to React context

javascript

reactjs

react-context

react-hooks