javascript 如何使用状态传递函数以响应useContext

xytpbqjk 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(178)

尝试学习如何使用react hooks。我使用createContext，我想将状态和函数一起传输到其他组件，但我需要帮助来完成此操作。我还想问一下这样做是否有意义。
事实上，在我的例子中，我可以通过使用setState来更新状态，但是通过在上下文中定义一个函数，我认为在任何地方使用这个函数都更有意义。
我的背景是：

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> < /
    >
  );
};

在这种情况下，可以直接在组件中使用该函数，而不必尝试传递函数。但我好奇的是如何管理函数的传递和接收。
注意：当我尝试以这种方式使用它时，我得到这个错误：第一个月

JavaScript

来源：https://stackoverflow.com/questions/62366824/how-can-%c4%b1-pass-function-with-state-for-react-usecontext

2条答案

按热度按时间

kkbh8khc1#

React上下文是一种通过React节点树传递数据而无需手动传递属性的机制。使用createContext可为React生态系统中的数据结构创建引用，从而将给定数据结构公开给子节点。
另一方面，Context.Provider提供了一个值给作为提供者的子节点的消费组件。有几个警告要记住--每当你的提供者的值的属性改变时，它将触发它的所有订阅者--它的后代--的重新呈现。提供者本身不是一个钩子，因此当使用钩子生成值时，必须使用新的值集重新呈现提供程序。
您的代码中有几个方面需要解决：
1.在Context.Provider中使用useState，
1.返回useState的结果作为提供程序值，以及
1.作为值提供给提供程序的数据结构

- 在Context.Provider中使用useState**

当在react Context中使用useState的结果时，您必须了解在后代中使用的含义，以及它将产生的影响。React非常擅长确定重新呈现的内容和时间，它为您提供了进一步限制该行为的控制。但是，是一个react Functional Component Hook，每次值被更新时都会触发一个新的渲染，这是有规则的，优先级和延迟，但是可以保证重新呈现任何使用useState钩子的功能组件。在可能的情况下将上下文对象作为纯函数。

- 返回useState的结果作为提供程序值**

在您的示例中，您将useState调用的结果原样返回给上下文提供程序，这给出了React无法正确订阅和侦听更改的对象结构。

- 作为值提供给提供程序的数据结构**

在Provider中使用state时，需要将正确的JSON返回给Provider，以便它可以订阅值更改并通知其子代
用途

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

赞(0）回复(0）举报 2023-01-01

0yg35tkg2#

正如我在评论中所说的，你们非常接近，你们传递函数、对象和值的方式是一样的

const [expenses, setExpenses] = useState([]);
  const clearItems = () => {
    setExpenses([]);
  };
  const value = { expenses, setExpenses, clearItems };

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 如何使用状态传递函数以响应useContext

2条答案

相关问题

热门标签

最新问答