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

Question

我正在尝试使用 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>
    );
}

Answer 1

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

这是否有任何数据注销？

如果是这样，你能提供输出吗？

Answer 2

您可以尝试将数据发送到组件：

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

并显示结果

Answer 3

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

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

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

Rendering text after fetching data from database using React and AWS Amplify

reactjs

aws-amplify