typescript React：无法读取null的属性(阅读'useState')-转译JSX元件

xoshrz7s 于 2022-12-14 发布在 TypeScript

关注(0)|答案(1)|浏览(90)

我看到过一些类似错误的帖子，但是我在这里遇到了困难，因为我对泛型类型不是很熟悉，尽管我可能会尝试，但我还是不能完全弄清楚异步和承诺。无论如何，这个Typescript代码不能为article找到一个初始值。我真的不想要一个默认值，但我已经尝试过null，我已经尝试过在一个数组中放入一个单独的伪对象，和我能想到的每一种组合。有人能帮我从数据库中得到一个文章列表，然后将它们Map为列表项吗？
这是类型。

export type article = {
  article_id: number
  organization_id: number
  title: string
  subtitle: string
  article_text: string
  publish_date: Date | null
  end_date: Date | null
  created_date: Date
  modified_date: Date
  created_by: string
  modified_by: string
}

而代码

import { useEffect, useState } from "react";
import React from "react";

export default async function TestCrap() {
    const [articles, setArticles] =
        useState<article[]>([
        {
            article_id: 1,
            organization_id: 1,
            title: "string",
            subtitle: "string",
            article_text: "string",
            publish_date: null,
            end_date: null,
            created_date: new Date("2022-01-01"),
            modified_date: new Date("2022-01-01"),
            created_by: "string",
            modified_by: "string",
        },
    ]);

    const prisma = new PrismaClient();

    useEffect(() => {
        prisma.article.findMany().then((a) => setArticles(a));
    }, []);

    // const count: number = await prisma.person.count();
    // const count: number = 999;

    return (
        <div>
            <h1>TEST CRAP</h1>
            {/* <h3>Count: {count.toString()}</h3> */}
            <ul>
                {articles.length > 0 &&
                    articles.map((value, index) => {
                        return (
                            <>
                                <li key={index}>Title: {value.title}</li>
                            </>
                        );
                    })}
            </ul>
        </div>
    );
}```

typescript

来源：https://stackoverflow.com/questions/74717824/react-cannot-read-properties-of-null-reading-usestate-render-jsx-componen

1条答案

按热度按时间

xytpbqjk1#

应使用null作为默认值：

export default function TestCrap() {
  const [articles, setArticles] = useState<article[] | null>(null);

  const prisma = new PrismaClient();

  useEffect(() => {
    (async () => {
      const articles = await prisma.article.findMany();
      setArticles(articles);
    })()
  }, []);

  if (articles == null) {
    // if articles is still null we can't return the list
    return <>Fetching the articles...</>;
  }

  // here we have the articles typed
  return (
    <div>
      <h1>TEST CRAP</h1>
      <ul>
        {articles.length > 0 &&
          articles.map((value, index) => {
            return (
              <li key={index}>Title: {value.title}</li>
            );
         })}
      </ul>
    </div>
  );
}

这样，就不需要一个哑数组作为初始值。
此外，从函数定义中删除关键字async。

赞(0）回复(0）举报 2022-12-14

我来回答

typescript React：无法读取null的属性(阅读'useState')-转译JSX元件

1条答案

相关问题

热门标签

最新问答