Javascript 在React中将数据从一个组件传递到另一个组件时出现问题

我在标题中有一个SearchForm组件，我从API中获取数据并获取用于搜索的数据，我需要在我的软件组件中使用search来显示我找到的软件

SearchForm组件：

const SearchForm=（{style}）=>{
const[search，setSearch]=useState（“”）；
const[shouldFetch，setShouldFetch]=useState（false）；
常数handleChange=（e）=>{
设置搜索（如目标值）；
}
useffect（（）=>
if（shouldFetch）{
（异步（）=>{
const response=等待获取(`http://127.0.0.1:8000/api/software/?search=${search}`）；
const data=wait response.json（）；
setShouldFetch（false）；
})()
}
}，[shouldFetch]）；
const handleClick=（）=>setShouldFetch（true）；
返回(
进入
);
};
export const SearchButton=（{style，id，onClick}）=>{
返回(
);
};

和软件组件：

const软件=（）=>{
const[软件，集合软件]=useState（[]）；
const[total，setTotal]=useState（null）；
const[totalPages，setTotalPages]=useState（null）；
const[valid，setValid]=useState（false）；
const fetchData=async（{currentPage}）=>{
const response=等待获取(`http://127.0.0.1:8000/api/software/?p=${currentPage}`）；
const data=wait response.json（）；
成套软件（数据、结果）；
setTotal（data.count）；
setTotalPages（数据总页数）；
setValid（true）；
}
useffect（（）=>{
获取数据（{currentPage:1}）；
}, []);
返回(
{
有效的&&
...
{softwares.map（s=>(
))}
}
);
};

我不能在软件中使用SearchForm，因为在App.js中，它们“相当遥远”，我只是不想把它们都变成一个组件

下面是App.js中的外观：

const-App=（）=>{
...
返回(
...
...
);
}

---

那么我该怎么办呢？

实际上，这是一种有效的方法，可以将共享状态向上移动一个组件，称为提升状态，这是官方参考资料

有很多方法可以做到这一点。但一般来说，您应该将获取和存储数据的责任放在不同的地方。例如，您可以为此或react dedux使用上下文。