我尝试使用 React useContext 钩子传递一个函数，但它不起作用，我做错了什么吗？

Question

我试图将一个函数从App组件传递到另一个，但它说该函数没有定义(在子组件中)，很肯定我做了一些错误的事情，比如以错误的方式调用函数，但我无法弄清楚，因为大多数在线答案都使用基于类的组件

App.js

function App() {
const API_URL = "https://course-api.com/react-tours-project";
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
async function getData() {
const response = await fetch(API_URL);
const data = await response.json();
setData(data);
setLoading(false);
}
useEffect(() => {
getData();
}, []);
const removeItemContext = React.createContext();
function removeItem(itemId) {
const newData = data.filter((object) => object.id !== itemId);
setData(newData);
}
if (loading) {
return (
<main>
<Loading />
</main>
);
}
return (
<main>
<removeItemContext.Provider value={removeItem}>
<Tours data={data} />
</removeItemContext.Provider>
</main>
);
}
export default App;

Tour.js(这是一个孙子)

import React, { useContext } from "react";
import removeItemContext from "./App";
function Tour(data) {
const { id, name, info, image, price } = data;
const deleteButton = useContext(removeItemContext);
return (
<article>
<img src={image} alt={name} />
<h2>{name}</h2>
<span>{price}</span>
<p>{info}</p>
<button
onClick={() => {
removeItem(id);
}}
>
Not interested
</button>
</article>
);
}
export default Tour;

Answer 1

上下文创建应该在App组件之外的:它应该只发生一次，而不是每次渲染(这就是钩子的区别，例如;))

像这样:

const removeItemContext = React.createContext();
function App() {
// ...
return (
<main>
<removeItemContext.Provider value={removeItem}>
<Tours data={data} />
</removeItemContext.Provider>
</main>
);
}
export default App;

完整的实现将在一个专用文件中声明上下文，以便在App和Tour中同时导入:

// removeItemContext.js
const removeItemContext = React.createContext();
export default removeItemContext;
// App.js
import removeItemContext from "./removeItemContext.js";
function App() {
// ...
return (
<main>
<removeItemContext.Provider value={removeItem}>
<Tours data={data} />
</removeItemContext.Provider>
</main>
);
}
export default App;
// Tour.js
import removeItemContext from "./removeItemContext.js";
function Tour(data) {
// ...
const deleteButton = useContext(removeItemContext);
// ...
}

Answer 2

你在Tour.js组件中引用的数据实际上是React默认传递的props变量。因此，首先需要解构对象。并且还要从上下文中解构removeItem函数。

function Tour({data}) {
const { id, name, info, image, price } = data;
const { removeItem } = useContext(removeItemContext);
}