我試圖按下這個可按下的按鈕，然后導航到一個新頁面。棘手的一點是，這個 Pressable 專案是回傳陣列的一部分，因為它們中有多個被渲染，每個都使用不同的資料。我希望每個按鈕都將我帶到“產品頁面”，每個頁面都因按鈕而異
這是我到目前為止所擁有的：
主要功能
const JobRequestList = () => {
const [data, setData] = useState([]);
useEffect(() => {
returnArray().then(data2 => {
setData(data2);
});
}, []);
if (data.length === 0) {
j = [];
return (
<ScrollView>
<View key={'ERROR'} style={styles.wrapperERROR}>
<Text style={styles.textError}> {'No Current Job Requests'} </Text>
</View>
</ScrollView>
);
} else {
return <ScrollView>{data}</ScrollView>;
}
};
這會請求資料，并以可以呈現的形式回傳資料。它要么回傳一個無物件，要么回傳來自以下函式的專案陣列 - 這是我的 onPress 所在的位置，并且不知道如何在其中實作導航功能。請注意，我已經設定了導航功能
const returnArray = async () => {
return queryData().then(() => {
return j.map(x => {
return (
<Pressable
key={x.id}
style={styles['wrapper' x.data().PD]}
onPress={() => {}}>
<Text style={styles.text}> {x.data().PD} </Text>
<Text style={styles.text}> {x.data().address} </Text>
<Text style={styles.text}> {x.data().time} </Text>
</Pressable>
);
});
});
};
上面的函式然后呼叫下面的
const queryData = async () => {
await firestore()
.collection('Jobs')
.where('driver', '==', 'TBA') //TODO ADD CUSTOMER DISTANCE
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
j.push(doc);
});
});
};
這是我的導航功能應該在這個類中 - 同樣，它已經正確設定
const navigation = useNavigation();
navigation.navigate('JobInfo');
謝謝你先進！
uj5u.com熱心網友回復：
在 React 中將 JSX 存盤在組件狀態中是反模式的。React 組件的渲染 UI 是 state & props 的函式。將資料存盤在 state 中，然后渲染映射到 JSX 的資料。
例子：
queryData獲取 firebase 檔案和資料
const queryData = async () => {
await firestore()
.collection('Jobs')
.where('driver', '==', 'TBA') //TODO ADD CUSTOMER DISTANCE
.get()
.then(querySnapshot => {
const docs = [];
querySnapshot.forEach(doc => {
docs.push({
...doc,
data: doc.data(),
});
});
return docs;
});
};
映射狀態時在Pressable組件的處理程式中應用導航邏輯。onPressdata
const JobRequestList = () => {
const navigation = useNavigation();
const [data, setData] = useState([]);
useEffect(() => {
queryData()
.then(data => {
setData(data);
});
}, []);
return (
<ScrollView>
{data.length
? data.map(el => (
<Pressable
key={el.id}
style={styles['wrapper' el.data.PD]}
onPress={() => {
navigation.navigate('JobInfo');
}}
>
<Text style={styles.text}> {el.data.PD} </Text>
<Text style={styles.text}> {el.data.address} </Text>
<Text style={styles.text}> {el.data.time} </Text>
</Pressable>
))
: (
<View key={'ERROR'} style={styles.wrapperERROR}>
<Text style={styles.textError}> {'No Current Job Requests'} </Text>
</View>
)
}
</ScrollView>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/513523.html
標籤：Google Cloud Collective javascript反应反应式谷歌云火库反应钩子
上一篇：無法安裝和卸載NPM包
下一篇：【原創】evmos玩法