使用 React 和 AWS Amplify 从数据库获取数据后呈现文本答案

【问题标题】：Rendering text after fetching data from database using React and AWS Amplify使用 React 和 AWS Amplify 从数据库获取数据后呈现文本
【发布时间】：2021-11-25 15:57:08
【问题描述】：

我正在尝试使用 React 和 AWS Amplify 构建一个 Web 应用程序，该应用程序将向数据库发出请求并相应地显示一些文本。但是，我遇到以下错误：

错误：对象作为 React 子对象无效（找到：带有键 {} 的对象）。如果您打算渲染一组子项，请改用数组。

错误信息还表明错误发生在setNfts(nftList);之后

App.jsx：

function App() {

  const [nfts, setNfts] = useState([]);

  const fetchNfts = async () => {
    try {
        const nftData = await API.graphql(graphqlOperation(listNfts));
        const nftList = nftData.data.listNfts.items;
        console.log('nft list', nftList);
        setNfts(nftList);
    } catch (error) {
        console.log('error on fetching nfts', error);
    }
  };

  useEffect(() => {
    fetchNfts();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <AmplifySignOut />
        <h2>My App Content</h2>
      </header>

      <Box sx={{ display: 'grid', columnGap: 3, gridTemplateColumns: 'repeat(3, 1fr)' }}>
        {nfts.map((nft, idx) => {
          return (
            <NftCard filePath={nft.filePath} name={nft.name} creator={nft.creator} idx={idx} />
          );
        })}
      </Box>
    </div>
  );
}

NftCard.jsx：

import React from 'react';
import { Paper } from '@material-ui/core';

export function NftCard(filePath, name, creator, idx) {

    return(
        <Paper variant="outlined" elevation={2} key={`nft${idx}`}>
            <div className="nftCard">
                <div>
                    <img src={filePath} alt="" width="100px" height="100px" />
                    <div className="nftTitle">{name}</div>
                    <div className="nftCreator">{creator}</div>
                </div>
            </div>
        </Paper>
    );
}

【问题讨论】：

标签： reactjs aws-amplify

【解决方案1】：

console.log('nft list', nftList);

这是否有任何数据被注销？

如果可以，能否提供输出？

【讨论】：

0: createdAt: "2021-09-14T17:16:14.075Z" creator: "Beeple" 描述：“我们可以一起解决这个问题。”文件路径：“nft-storage131929-dev.s3.amazonaws.com/public/…”id：“gr4334t4tog345ht35”名称：“海洋前线”价格：35 更新时间：“2021-09-14T17:16:14.075Z”[[原型]]：对象
在我看来您正在尝试遍历 Object？

【解决方案2】：

您可以尝试通过以下方式向组件发送数据：

<NftCard filePath={nft["0"].filePath} name={nft["0"].name} creator={nft["0"].creator} idx={idx} />

并显示结果

【讨论】：

【解决方案3】：

传递给 NftCard 的 props 应该单独列出并用花括号括起来：

function NftCard({ filePath, name, creatorThumbnail, creator, price, idx }) {
   ...
}

【讨论】：