react js中非关系组件中的函数调用

Question

ProductTable.js

从"导入React，{useEffect，useState}；反应"；；

function ProductTable() {
useEffect(() => {
fetchData();
}
const fetchData = () => {
axios
.get("http://localhost:4000/api/products/product/viewAllProduct")
.then((res) => {
const getData = res.data.data;
console.log(getData);
setData(getData);
});
};
return ( jsx..)
}
export default ProductTable;

**产品模式.js**

``import React, { useEffect, useState } from "react";
function ProductModals(){
const handleSubmit=()=>{
.....
}
return (jsx..)
export default productModals;`

viewProduct.js

import React, { useEffect, useState } from "react";
import ProductTable from "../../Components/Tables/Product/ProductTable";
import ProductModals from "../../Components/Modals/Product/ProductModals";
function viewProduct(){
return(
<productModals/>
<productTable/>
)
}
export default viewProduct;

我需要将productTable.js组件的fetchData函数获取到productModal.jscomponent。这两个组件的父组件都是viewProduct.js。我尝试了很多方法。但无法工作。在productModal.js组件中有一个表单提交函数，当表单提交完成时，我需要调用fetchData函数，如果有人知道方法，请帮助我

Answer 1

您可以通过react钩子来实现这一点。首先，在父组件中使用fetchData将数据传递给两个子组件(如果需要)。还有Once提交表单，通过它调用fetchData函数，并通过setData道具调用Update。因此，它的父状态也会更新。

viewProduct.js

import React, { useEffect, useState } from "react";
import ProductTable from "../../Components/Tables/Product/ProductTable";
import ProductModals from "../../Components/Modals/Product/ProductModals";
useEffect(() => {
fetchData();
}
const fetchData = () => {
axios
.get("http://localhost:4000/api/products/product/viewAllProduct")
.then((res) => {
const getData = res.data.data;
console.log(getData);
setData(getData);
});
};
return ( jsx..)
}
function viewProduct(){
return(
<productModals data={data} setData={setData}/>
<productTable data={data}/>
)
}
export default viewProduct;

productModel.js

现在，提交您的表单，并在通过setData道具获得响应更新的内部和之后调用函数recall。

const fetchData = () => {
axios
.get("http://localhost:4000/api/products/product/viewAllProduct")
.then((res) => {
const getData = res.data.data;
console.log(getData);
setData(getData);
});
};
const recall=useCallback(()=>fetchData(),[])

Answer 2

如果场景像您提供的示例一样简单，则可以提升状态，但如果您有许多嵌套的子组件需要读取/设置这些状态，则可以使用上下文，正如Rajesh所建议的那样。

提升状态向上

致"；提升状态上升"；在父组件ViewProduct中创建一个状态，并通过props:将相关变量传递给相应的组件

function ViewProduct(){
const [done, setDone] = useState(false);
return(
<productModals setDone={setDone} />
<productTable done={done} />
)
}

在handleSubmit函数中使用传入的道具setDone来更新状态：

function ProductModals({setDone}){
const handleSubmit=()=>{
.....
setDone(true);
}

并且在ProductTable中使useEffect依赖于done仅在其为true:时取

function ProductTable({done}) {
useEffect(() => {
if (!done) return;
fetchData();
}, [done]);
const fetchData = () => {
axios
.get(...

重用状态

如果您需要重用done状态，您可以通过将setDone传递给ProductTable来重置它，并在获取数据时将其设置回false：

function ProductTable({done, setDone}) {
useEffect(() => {
if (!done) return;
fetchData();
setDone(false);
}, [done]);
const fetchData = () => {
axios
.get(...