如何对 FlatList 中的 Array 数据进行排序？

Question

我将数据放入 useState 以便每当数据更改时，UI 也会更改。

  const [state, setState] = useState();

有了这个数据，我运行 FlatList。（参见 data 部分）

    <FlatList
      ref={flatListRef}
      contentContainerStyle={{
        paddingBottom: 20,
      }}
      keyboardDismissMode={true}
      showsVerticalScrollIndicator={false}
      data={state}
      keyExtractor={(comment) => "" + comment.id}
      renderItem={renderComment}
    />

我想按日期 createdAt 对这些数据进行排序。

我在 state 中的数据是由 object 组成的 Array。

Array [
  Object {
    "__typename": "Comment",
    "createdAt": "1645612616365",
    "id": 434,
    "isMine": true,
    "payload": "가",
    "user": Object {
      "__typename": "User",
      "avatar": "https://chungchunonuploads.s3.amazonaws.com/avatars/1-1642681327283-%E1%84%80%E1%85%B5%E1%86%B7%E1%84%86%E1%85%B5%E1%84%89%E1%85%AE%E1%86%A8.jpeg",
      "username": "김미숙",
    },
  },
  Object {
    "__typename": "Comment",
    "createdAt": "1645589527805",
    "id": 431,
    "isMine": true,
    "payload": "음",
    "user": Object {
      "__typename": "User",
      "avatar": "https://chungchunonuploads.s3.amazonaws.com/avatars/1-1642681327283-%E1%84%80%E1%85%B5%E1%86%B7%E1%84%86%E1%85%B5%E1%84%89%E1%85%AE%E1%86%A8.jpeg",
      "username": "김미숙",
    },
  },
]

我在搜索数组排序的方法时，建议我使用sort。

所以我做了如下功能。

  const sortedState = state.sort(function (a, b) {
    parseInt(a.createdAt) - parseInt(b.createdAt) > 0;
  });

我的计划是把这个 sortedSate 放在 FlatList 中。

    <FlatList
      data={sortedState}
    />

但是，我遇到了两条错误消息。

1) 尝试分配只读属性.

可能是因为 state 是用 const 声明的。所以我无法对其进行排序（更改）..

2) undefined 不是一个对象（计算'state.sort'）

不知道为什么，好像不能用sort方法。

请帮帮我。

+ 当我调用 setState.

当 UI 首先安装时。

  useEffect(() => {
    setState(updatePhoto?.seePhoto?.comments);
    register("comments", {
      required: true,
    });
  }, [state, updatePhoto, register]);

当我编辑评论时。

  const updateEditComment = (cache, result) => {
    const {
      data: {
        editComment: { error, ok, id },
      },
    } = result;
    if (ok) {
      refetch();
      setState(updatePhoto);
      textRef.current.clear();
    }
  };
  const onEditValid = async ({ comments }) => {
    const commentId = await AsyncStorage.getItem("@commentId");
    await editCommentMutation({
      variables: {
        id: parseInt(commentId),
        payload: comments,
      },
      update: updateEditComment,
    });
  };

Answer 1

您可以在将数据呈现在 FlatList 中之前对其进行排序。

我已将您的排序功能重构为

const getSortedState = (data) => data.sort((a, b) => parseInt(a.createdAt) - parseInt(b.createdAt));

const sortedItems = useMemo(() => {
  if(state) {
    return getSortedState(state);
  }

  return state;
}, [state]);

<FlatList
  data={sortedItems}
/>

例子Snack.

如何对 FlatList 中的 Array 数据进行排序？

How to sort Array data in FlatList?

gql

react-native

react-hooks

use-state