第 1 頁
我的 FlatList 如下所示。
<FlatList
ref={flatListRef}
contentContainerStyle={{
paddingBottom: 20,
}}
keyboardDismissMode={true}
showsVerticalScrollIndicator={false}
data={state}
keyExtractor={(comment) => "" comment.id}
renderItem={renderComment}
/>
和 rendercomment 如下所示。如您所見，它進入帶有資料的 CommentRow 螢屏。
const renderComment = ({ item: commentsRow }) => {
const { comments } = getValues();
return (
<CommentRow
commentsRow={commentsRow}
photoId={route?.params?.photoId}
updatedComments={comments}
textRef={textRef}
/>
);
};
當我按下confirm按鈕時，它可以create評論。
<ConfirmButton onPress={handleSubmit(onValid)}>
<ConfirmText>??</ConfirmText>
第2頁
如果我們去CommentRow螢屏。如果我按下編輯按鈕，我想編輯我的評論。
<TouchableOpacity onPress={onEditClick}>
<WriteComment>??</WriteComment>
但問題是當我按下edit按鈕時，我需要使用相同的按鈕更改評論的有效負載，即Comment. 因此，當我按下確認按鈕時，它不會edit發表評論，而是create發表評論。
如果這個組件在一頁中，那么我可以使用useState來區分編輯按鈕和確認按鈕。但由于它們分別在兩個螢屏中，我無法發送這是 edit button 的資訊from page 2 to page 1。因為 flatlist 只傳遞資料from page 1 to page 2。
我已經為這個問題苦苦掙扎了 1 周 :( 你對此有什么想法嗎？
uj5u.com熱心網友回復：
您可以將回呼函式從第 1 頁傳遞到第 2 頁，如下所示。
const onUpdateComment = React.useCallback((newComment) => {
// update state here for setting the new comment
}, [whatever you need here])
const renderComment = ({ item: commentsRow }) => {
const { comments } = getValues();
return (
<CommentRow
commentsRow={commentsRow}
photoId={route?.params?.photoId}
comments={comments}
updateComments={onUpdateComment} // this has changed on page 1
textRef={textRef}
/>
);
};
在第 2 頁上，您可以使用傳遞的回呼函式。
const onEditClick = React.useCallback(() => {
// do the other stuff
updateComments(newComment) // this is the callback function passed in the updateComments prop of CommentRow in page 1
}, [whatever you need here])
<TouchableOpacity onPress={onEditClick}>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/428813.html