如何将React中useState的数据共享到另一个组件

Question

嘿，伙计们，让我快速解释一下我的问题。

我目前有一个组件，用户可以在其中搜索一些内容。在他们点击按钮后，我从Firebase获得数据，然后将其存储在useState中，我随后进行映射。整个操作在一个功能中。

但现在我在同一个页面上显示结果，因为我不知道如何将useState中的数据传输到其他组件。

const handleClick = async () => {


const kurzRef = collectionGroup(db, 'kurzwaffensub' );
const MOD = query(kurzRef,where("kurzModell", "==", `${kurzModell}` ));
if(kurzModell) {
const getWaffenDaten = async () => {
const modell = await getDocs(MOD);
const data = [];
for (const doc of modell.docs) {

const parentDoc = await getDoc(doc.ref.parent.parent);
const { Name, avatar,avatarPath, Erfahrung, Adresse, Schützenverein } = parentDoc.data();

const  waffenbilderRef = collection(db, 'users', doc.data().uid, 'waffenbildersub')
const subCollectionDocs = await getDocs(waffenbilderRef)
const subCollectionData = subCollectionDocs.docs.map((doc) => {
return { id: doc.id, ...doc.data()}
})

data.push({
...doc.data(),
Name,
subCollectionData,
avatar,
avatarPath,
Erfahrung,
Adresse,
Schützenverein
});
}
setTest(data)    
}
getWaffenDaten()
}

在那个操作之后，我只是在同一个页面中返回Result。我想在onClick事件之后用Result更改页面。因为我不想看到搜索组件的用户界面。

Perhabs很简单，但我还是一个初学者，如果你能帮助我，教我一些新的和重要的东西，我会很高兴。

Answer 1

您可以通过多种方式做到这一点：

1. 如果您使用路由器并从结果页面获取数据，则可以将搜索查询作为URL参数传递
2. 您可以使用状态管理工具，如Redux或内置上下文api