如何使用 ID 获取特定 JSON 数据（React Hooks）

Question

我想使用其唯一 ID 从 json 中获取特定项目，但使用我创建的函数我没有获取任何数据。这是函数：

export function getPost(id) {
  return fetch("http://localhost:3004/edit/"+id)
    .then(data => data.json())
}

这是我要打印项目的页面。 ID 来自另一个页面，它显示在 url 中，感谢 useParams:

interface IPost {
    id: number;
    title: string;
    author: string;
    content: string;
}

const Edit: React.FC = () => {
    const [post, setPost] = useState<IPost>();

    const {id} = useParams();

    // Not working
    getPost(id)
    .then(items => {
        setPost(items)
    })

    return (
        <div className="containerHomepage">
            <form className="formulari">
                <div className="containerBreadCrumb">
                    <ul className="breadCrumb">
                        <li>Posts</li>
                        {/* THIS SHOWS AN ERROR */}
                        {post.author}
                    </ul>
                </div>

                <div className="containerTitleButton">
                    <input
                        className=""
                        type="text"
                        placeholder='Post title'
                        name="title"
                        // onChange={handleInputChange}
                    ></input>
                    <button
                        className="button"
                        type="submit"
                    >Save</button>
                </div>

                <div className="containerEdit">
                    <input
                        className="editAuthor"
                        type="text"
                        placeholder='Author'
                        name="author"
                        // onChange={handleInputChange}
                    ></input>
                    <input
                        className="editContent"
                        type="textarea"
                        placeholder='Content'
                        name="content"
                        // onChange={handleInputChange}
                    ></input>
                    {/* <div className="errorEmpty">{error}</div> */}
                </div>

            </form>
        </div>
    );
};


// ========================================

export default Edit;

在“{post.author}”中抛出错误，我猜是我的函数“getPost”出了问题。

Answer 1

由于您将 post 初始化为 undefined:

const [post, setPost] = useState<IPost>();

尝试访问它的属性将抛出：

{post.author}

您的 TypeScript 应该已经警告过您 - 最好在运行应用程序之前修复 TypeScript 警告以避免运行时错误。在尝试访问对象的属性之前检查该对象是否存在。

{post?.author}

你的 getPost 函数没有问题，除了你应该只调用它一次，当组件安装时，而不是每次 re-renders.

useEffect(() => {
  getPost(id).then(setPost);
}, []);

我还建议不要忽略错误 - 捕获它们以避免未处理的拒绝。

useEffect(() => {
  getPost(id).then(setPost).catch(handleError);
}, []);

如何使用 ID 获取特定 JSON 数据（React Hooks）

How to fetch specific JSON data using an ID (React Hooks)

json

fetch

reactjs

react-router

react-hooks