Question

由于某种原因，我被困在这个问题上。当有一个简单的数组时，我知道如何使用 .sort 。我不太确定如何使用该对象中的变量对数组中的嵌套对象进行排序。我可以排序，但不知道如何显示。

这是我正在使用的。我从数据库中获取数据并映射该数据以显示它。一切都按预期工作。现在我想获取这些数据并按艺术家对其进行排序。

这是我正在使用的代码。

export default function ShowRecords() {
  const classes = recordFormStyles();
  const url = " http://localhost:5000";

  //get userData state to use in useEffect

  //set state for showing records in database and opening/closing modals

  const [newRecords, newRecordData] = React.useState([]);

  const [editOpen, handleEditModal] = React.useState(false);

  const [addModalOpen, handleAddModal] = React.useState(false);

  //set state for edit records

  const [title, setTitle] = React.useState("");

  const [artist, setArtist] = React.useState("");

  const [rating, setRating] = React.useState("");

  const [genre, setGenre] = React.useState("");

  const [description, setDescription] = React.useState("");

  const [userId, setUserId] = React.useState("");

  //set state for favorite icon

  const [favorite, setFavorite] = React.useState([]);

  const fetchFavoriteData = async () => {
    const result = await axios.get(url + "/favorite/get", authToken);

    setFavorite(result.data);
  };

  const addFavorites = async (_id, title, artist, rating, genre, description, isFavorite) => {
    const favorites = {
      userId: _id,
      title,
      artist,
      rating,
      genre,
      description,
      isFavorite
    };

    const result = await axios.post(
      url + "/favorite/add",
      favorites,
      authToken
    );

    setFavorite(result.data);
    
  };

  const deleteFavorite = async (title) => {
    await axios.delete("http://localhost:5000/favorite/delete", {
      data: { title: title },
      authToken,
    });
  };

  //functions to control state

  const handleAddModalOpen = () => {
    handleAddModal(true);
  };

  const handleCloseAddModal = () => {
    handleAddModal(false);
  };

  const handleIsEditModalClose = () => {
    handleEditModal();
  };

  //fetch record data

  const fetchData = async () => {
    const result = await axios.get(url + "/record/get", authToken);
    newRecordData(result.data);
  };

  React.useEffect(() => {
    fetchData();
    fetchFavoriteData();
    
  }, []);

  // delete records

  const deleteRecord = async (_id) => {
    const deleteRecords = {
      _id: _id,
    };

    await axios.delete(url + "/record/" + _id, deleteRecords).then((result) => {
      const refresh = newRecords.filter((result) => result._id !== _id);
      newRecordData(refresh);
    });
  };

  //functions for controlling edit record state

  const editRecord = (_id, title, artist, rating, genre, description) => {
    setUserId(_id);
    setTitle(title);
    setArtist(artist);
    setRating(rating);
    setGenre(genre);
    setDescription(description);
    handleEditModal(true);

    console.log(title);
  };

  //functions for setting favorite state and color and post request to add favorite

  return (
    <div>
      {/* set props */}

      <Favorites />
      <AddRecord
        isAddModalOpen={addModalOpen}
        handleIsAddModalClose={handleCloseAddModal}
        addNewRecords={newRecords}
        handleIsAddModalOpen={handleAddModal}
        refreshRecordData={newRecordData}
      />
      <EditRecords
        editModalOpen={editOpen}
        handleCloseEditModal={handleIsEditModalClose}
        editUserId={userId}
        editTitle={title}
        editArtist={artist}
        editRating={rating}
        editGenre={genre}
        editDescription={description}
        editTitleState={setTitle}
        editArtistState={setArtist}
        editRatingState={setRating}
        editGenreState={setGenre}
        editDescriptionState={setDescription}
        editUrl={url}
        editFetchData={fetchData}
        editNewRecordData={newRecordData}
      />
      <Button
        className={classes.addButton}
        onClick={() => handleAddModalOpen(true)}
      >
        Add Record
      </Button>

      <div className={classes.cardsContainer}>
        <Grid container spacing={8} style={{ padding: 80 }} justify = "center">
          {newRecords.length > 0 &&
            newRecords.map((element) => (
              <RecordCard
                key = {element._id}
                element={element}
                editRecord={editRecord}
                deleteRecord={deleteRecord}
                addFavorites = {addFavorites}
                deleteFavorite = {deleteFavorite}
                favorite = {favorite}
              />
            ))}
        </Grid>
      </div>
    </div>
  );
}

我在 uesEffect 中获取数据，我想使用 Arist 名称对其进行排序。我只是不确定如何做到这一点。我找不到太多的谷歌搜索。

Answer 1

在将数据保存到 state 之前对数据进行排序。 sort 函数可以接收一个返回 -1, 0, 1 的函数来确定应该如何排序。以下示例使用 localeCompare 函数按艺术家排序。

let data = [
  { artist: 'john', record: '1' },
  { artist: 'mary', record: '2' },
  { artist: 'bob', record: '3' }
];

let sorted = data.sort((a,b) => (a.artist.localeCompare(b.artist)));

console.log(sorted);

如何对数组中的嵌套对象进行排序？

1 个答案: