Reactjs 如何使用UseMook渲染已排序的对象数组

我正在尝试使用ReactHooks渲染已排序的对象数组，我在相同和redux中也使用了useMemo。有人能给我推荐最好的方法吗。有没有关于我做错了什么的建议

我也把post.js放在了下面

我正在尝试使用ReactHooks渲染已排序的对象数组，我在相同和redux中也使用了useMemo。有人能给我推荐最好的方法吗。有没有关于我做错了什么的建议

谢谢

主页.js

import React, { useState, useEffect, useMemo } from "react";
    import Post from "../../Components/Post/Post";
    import "./HomePage.css";
    import axios from "axios";
    
    const HomePage = () => {
      const [posts, setPosts] = useState("");
    
      let config = { Authorization: "................" };
      const url = ".........................";
    
      useEffect(() => {
        AllPosts();
      }, []);
    
      const AllPosts = () => {
        axios
          .get(`${url}`, { headers: config })
    
          .then((response) => {
            const allPosts = response.data.articles;
            console.log(response);
          })
          .catch((error) => console.error(`Error: ${error}`));
      };
    
      const newPostsByTitle = useMemo(() => {
        allPosts.sort((a, b) => a.title.localeCompare(b.title)), [posts];
      });
    
      return (
        <div className="home">
          <div className="select">
            <select
              name="slct"
              id="slct"
              onChange={(e) => newPostsByTitle(e.target.value)}
            ></select>
          </div>
          <Post className="Posts" posts={posts} key={posts.title} />
        </div>
      );
    };
    
    export default HomePage;

Post.js
import React from "react";
import "./Post.css";
import { Fragment } from "react";

const Post = (props) => {
  const displayPosts = (props) => {
    const { posts } = props;

    if (posts.length > 0) {
      return posts.map((post) => {
        return (
          <Fragment>
            <div className="Post" key={post.title}>
              <img
                src={post.urlToImage}
                alt="covid"
                width="100%"
                className="img"
              />
              <h5 className="title"> {post.title}</h5>
              <p className="author"> {post.author}</p>
              <p className="description"> {post.description}</p>
            </div>
          </Fragment>
        );
      });
    }
  };
  return <div className="Posts">{displayPosts(props)}</div>;
};

export default Post;

import React，{useState，useffect，usemo}来自“React”；
从“../../Components/Post/Post”导入Post；
导入“/HomePage.css”；
从“axios”导入axios；
const主页=（）=>{
const[posts，setPosts]=useState（“”）；
let config={Authorization:…..“}；
常量url=“…………”；
useffect（（）=>{
AllPosts（）；
}, []);
const AllPosts=（）=>{
axios
.get（`${url}`，{headers:config}）
。然后（（响应）=>{
const allPosts=response.data.articles；
控制台日志（响应）；
})
.catch（（error）=>console.error（`error:${error}`）；
};
const newPostsByTitle=useMemo（（）=>{
排序（（a，b）=>a.title.localeCompare（b.title）），[posts]；
});
返回(
newPostsByTitle（e.target.value）}
>
);
};
导出默认主页；
Post.js
从“React”导入React；
导入“/Post.css”；
从“react”导入{Fragment}；
const Post=（道具）=>{
const displayPosts=（道具）=>{
const{posts}=props；
如果（posts.length>0）{
返回posts.map（（post）=>{
返回(
{post.title}
{post.author}
{post.description}
);
});
}
};
返回{displayPosts（props）}；
};
导出默认帖子；

我认为您对axios所称的dos的理解不正确。 这只是一个在触发器上下载数据的函数，但您需要将其存储在某个位置（例如POST），并使用这些POST而不是api调用：

const [posts, setPosts] = useState([]); // Use an empty array as defualt so it does work without data before the call
...
  const AllPosts = () => {
        axios
          .get(`${url}`, { headers: config })
    
          .then((response) => {
            const allPosts = response.data.articles;
           setPosts(allPosts) ?? You need to save the posts somewhere, since allPosts is not accessible outside of this function. Sicne you already have a useState, save them there
            console.log(response);
          })
          .catch((error) => console.error(`Error: ${error}`));
      };
    
const newPostsByTitle = useMemo(() => {
    return posts.sort((a, b) => a.title.localeCompare(b.title)), [posts]; // Using {} requeores the return keyword, if you omit the {} you dont need the return statement
}); // Now access the posts saved in state to sort them

---

另外，

中的键不起作用，因为posts是数组而不是对象。所以删除它。

对于@TJ来说似乎是个问题，但首先这段代码需要工作啊，我想它已经工作了，我正在尝试通过选择排序进行渲染。JSX代码正确吗？不，这也不正确，你想用它做什么？应该做什么：onChange={（e）=>newPostsByTitle（e.target.value）}当文章被呈现时，用户可以使用选择下拉选项通过排序示例标题、作者等来查看文章。我已经将post.js发布在主页下方。js请阅读useMemo的功能，它不跟踪选择，而是在文章更改时更新自身，因此，如果依赖于排序键，则需要跟踪所选选项并在UseMoom中进行排序。