Dingdong_client/screens/Detail/Comment.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, FlatList, RefreshControl } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { Div, Image, Text, Icon, Tag } from 'react-native-magnus';
import { useRequest } from '@umijs/hooks';

import useModel from 'flooks';
import Detail from './model';
import DetailHeader from './DetailHeader';

import CommentItem from './CommentCom';

const AppraisalSortMap = new Map([
  [
    'ALL',
    {
      name: '全部',
    },
  ],
  [
    'LATEST',
    {
      name: '最新',
    },
  ],
  [
    'PRAISE',
    {
      name: '好评',
    },
  ],
  [
    'BAD_REVIEW',
    {
      name: '差评',
      isBad: true,
    },
  ],
  [
    'HAVE_PIC',
    {
      name: '有图',
    },
  ],
]);

export default function Comment() {
  const { id } = useModel(Detail, ['id']);
  const [comments, setcomments] = React.useState([]);

  const [appraisalSort, setappraisalSort] = React.useState('ALL');
  const appraisalRequest = useRequest(
    `/appraisal/my?merchantId=${id}&appraisalSort=${appraisalSort}`,
    {
      refreshDeps: [id, appraisalSort],
      onSuccess: (result) => {
        setcomments(result);
      },
    }
  );

  return (
    <>
      <Div row p={15}>
        {[...AppraisalSortMap.keys()].map((item) => {
          const info = AppraisalSortMap.get(item);
          const isChoose = appraisalSort === item;
          return (
            <Tag
              key={item}
              bg={isChoose ? 'brand500' : info.isBad ? 'gray200' : 'brand100'}
              color={isChoose ? 'white' : info.isBad ? 'gray500' : 'brand500'}
              fontSize="sm"
              mr={5}
              mb={5}
              onPress={() => setappraisalSort(item)}
            >
              {info.name}
            </Tag>
          );
        })}
      </Div>

      {comments.map((item) => {
        return <CommentItem info={item} key={item.goodsAppraise} />;
      })}

      {comments.length === 0 && (
        <Div px={10} py={20}>
          <Text color="gray300" textAlign="center">
            暂无数据
          </Text>
        </Div>
      )}
    </>
  );
}