javascript - 我如何传递带有状态的函数以响应 useContext

Question

努力学习如何使用 react 钩子(Hook) .我用 创建上下文 我想将状态和功能一起转移到其他组件，但我需要有关如何执行此操作的帮助。我也想问这样做是否有意义。

事实上，我可以使用 来更新状态设置状态 在我的例子中，但是通过在上下文中定义一个函数，我认为在任何地方使用这个函数更有意义。我错了吗 ？

我的上下文是:

export const ExpenseContext = createContext();

export const ExpenseProvider = props => {
  const [expense, setExpense] = useState(initialExpenses)

  const clearItems = () => {
    setExpense([])
  }

  return ( <
    ExpenseContext.Provider value = {
      [expense, setExpense],
      clearItems
    } > {
      props.children
    } <
    /ExpenseContext.Provider>
  )
}

我要使用此功能的组件:

const ExpenseList = () => {
  const [expense, setExpense] = useContext(ExpenseContext);
  const {
    clearItem
  } = useContext(ExpenseContext);

  //   const clearItems = () => { normally this works ı know! 
  //     setExpense([])
  // }

  return ( <
    >
    <
    List > {
      expense.map((expense) => {
        return <Item key = {
          expense.id
        }
        expense = {
          expense
        }
        />;
      })
    } <
    /List> <
    div className = "text-center" > {
      expense.length > 0 && ( <
        Button onClick = {
          clearItems
        }
        type = "danger"
        shape = "round"
        icon = { < DeleteOutlined / >
        } >
        Clear Expenses <
        /Button>
      )
    } <
    /div> < /
    >
  );
};

在这种情况下，可以直接在组件内使用此功能，而无需尝试转移功能。但我很好奇的是我如何能够传输和接收函数。

注意:当我尝试以这种方式使用它时，我得到这个错误:TypeError: Object is not a function

Answer 1

React Context 是一种通过 React 节点树传递数据而无需手动传递 props 的机制。使用createContext为 React 生态系统中的数据结构创建一个引用，将给定的数据结构暴露给子节点。
Context.Provider另一方面，为作为 Provider 的子节点的消费组件提供了值(value)。有一些注意事项需要记住 - 每当您的提供者的值的属性发生变化时，它都会在其所有订阅者中触发重新渲染 - 它是后代。提供者本身不是钩子(Hook)，因此当使用钩子(Hook)生成值时，您必须使用新值集重新渲染提供者。

您的代码中有几件事需要解决:

使用 useState在 Context.Provider ,

返回 useState 的结果作为提供者值，

作为提供者的值提供的数据结构

使用 useState在 Context.Provider

当使用 useState 的结果时在 react Context ，你必须意识到消费对后代的影响，以及它将产生的影响。 React 非常擅长确定要重新渲染的内容和时间，并且它为您提供了控制以进一步限制该行为。 useState但是，是 react Functional Component Hook每次更新值时都会触发新的渲染。对此有一些规则，优先级和延迟，但可以保证重新渲染 Functional Component 的任何内容消耗 useState钩。正是出于这个原因，您希望尽可能将您的提供者/上下文对象视为纯函数。

返回 useState 的结果作为提供者值

在您的示例中，您返回 useState 的结果按原样调用您的上下文提供程序。这给出了一个 React 不能正确订阅和监听变化的对象结构。

作为值提供给提供者的数据结构

在 Provider 中使用状态时，您需要以正确的 JSON 格式返回给提供者，以便它可以订阅值更改，并通知其后代

利用

const providerValue = {
  expense,
  setExpense,
  clearItems
};
<ExpenseContext.Provider value={providerValue}/>

代替:

<ExpenseContext.Provider value = {
  [expense, setExpense],
  clearItems
} .../>

您提供的上下文提供程序的对象结构无效。 See example codepen.

Check out this great example on dev.to对于 useState与 Context