在本机反应中更新平面列表中的参数

Question

嗨，所以我目前有 2 个屏幕，屏幕 A 和屏幕 B。屏幕 A 有一个包含所有帖子的平面列表，当我按下特定帖子时，我导航到屏幕 B，这是该帖子的详细信息。

在屏幕 B 中，我添加了一个点赞图标，它会根据当前用户是否喜欢该帖子来更改填充或勾勒的时间。如果当前用户点赞了一篇文章，则该赞的记录会存储在我的数据库中。

我的问题是，当用户喜欢屏幕 B 上的帖子时，心脏会被填满，但是当我关闭屏幕 B 并转到屏幕 A，然后再次转到同一帖子的屏幕 B 时，心脏仍然被勾勒出来。只有当我重新加载我的应用程序时，它才会变为已填充。

屏幕 A：

  function PostsScreen({navigation}) {

  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  const loadPosts = async () => {
  setLoading(true);
  const response = await postsApi.getPosts(); //Api call to get all posts from backend
  setLoading(false);

 if (!response.ok) return setError(true);

 setError(false);
 setPosts(response.data);
 };

useEffect(() => {
loadPosts();
 }, []);

return(
<ActivityIndicator visible={loading} />
<FlatList
  data={posts}
  keyExtractor={(post) => post.id.toString()}
  renderItem={({ item }) => (
    <Card
      title={item.title}
      subTitle={item.subTitle}
      onPress={() => 
      navigation.navigate(routes.POST_DETAILS,item)}
    />
   )}
 />
);
}

屏幕B

function PostDetailsScreen({ route }) {
const post = route.params;
const { user} = useAuth();

const [addedToLikes, setAddedToLikes] = useState(post.isLiked);
const[likesCount,setLikesCount]=useState(post.likesCount)

const addToLikes = (PostId,userId) => {
postsApi.likePost({PostId,userId}); //api call to save like in backend
setAddedToLikes(!addedToLikes);
};

let show_likes="";
if(addedToLikes){
show_likes=(likesCount >1)?(("Liked by you")+" and "+(likesCount - 1)+((likesCount ==2)?( " 
other"):(" others"))):("Liked by you");
}else if(likesCount >0){
show_likes=(likesCount ==1)?(likesCount+ " like"):(likesCount + " likes");
}

return(
<TouchableOpacity onPress={() => {addToLikes(post.id,user.id)}}>
          {addedToLikes?<MaterialCommunityIcons
          name="heart"
        />:<MaterialCommunityIcons
            name="heart-outline"
          />}
</TouchableOpacity>

<View><TextInput>{show_likes}</TextInput></View>

)}

我没有使用上下文或 redux。

如果有人可以帮助您，将不胜感激。如果需要更多代码，请告诉我。

Answer 1

您可以将index 和callback 发送到post detail 屏幕

renderItem={({ item,index }) => (
    <Card
      title={item.title}
      subTitle={item.subTitle}
      onPress={() => 
      navigation.navigate(routes.POST_DETAILS,{post:item,index,updateView})}
    />
   )}

使用回调函数更新list

function PostDetailsScreen({ route }) {
const post = route.params.post;
const index = route.params.index;
const updateView = route.params.updateView;
const { user} = useAuth();

const [addedToLikes, setAddedToLikes] = useState(post.isLiked);
const[likesCount,setLikesCount]=useState(post.likesCount)

const addToLikes = (PostId,userId) => {
postsApi.likePost({PostId,userId}); 
setAddedToLikes(!addedToLikes);
updateView(!addedToLikes,index); // update main view
};

在首屏添加功能并更新列表

const updateView = (isLiked, index) => {
  const newPosts = [...posts];
  newPosts[index].isLiked = isLiked;
  let currentCount = newPosts[index].likesCount;
  currentCount = isLiked?currentCount+1:currentCount-1;
  newPosts[index].likesCount = currentCount;
  setPosts(newPosts);
};