使用React与AWS Amplify取数渲染时出现React子元素无效错误如何解决

错误原因 #

这个报错本质是你在JSX中直接将对象类型的值作为子元素渲染，React不支持直接渲染对象，触发原因有两个：

1. NftCard组件参数接收错误：React函数组件只会接收一个props对象作为第一个入参，你当前将filePath、name等字段作为独立参数声明，导致第一个参数filePath实际拿到的是完整的props对象，后续name、creator、idx都无法正确接收传值，误将对象渲染就会触发报错。
2. 接口返回字段类型不符：如果参数修改后仍报错，说明从AWS Amplify GraphQL接口返回的nft对象中，name或creator字段本身是对象类型（比如creator是包含用户id、昵称的结构），直接渲染对象就会触发该错误。

修复方案 #

第一步：修正NftCard参数写法 #

通过解构props的方式接收传入的属性，修改NftCard.jsx代码如下：

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

// 给参数外层加大括号，解构props对象中的对应字段
export function NftCard({ filePath, name, creator, idx }) {
    return(
        <Paper variant="outlined" elevation={2}>
            <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>
    );
}

第二步：检查接口返回字段类型 #

查看你代码中打印的nft list控制台日志，确认每个nft的name、creator是字符串类型：

• 如果creator是对象（比如结构为{userName: 'xxx', id: 'xxx'}），将渲染代码改为{creator.userName}，取对象下的字符串字段即可。

附加优化建议 #

列表渲染的key属性需要放在map遍历的直接子元素上，修改App.jsx中遍历部分的代码，把key移到NftCard标签上：

{nfts.map((nft, idx) => {
  return (
    <NftCard 
      key={`nft${idx}`}
      filePath={nft.filePath} 
      name={nft.name} 
      creator={nft.creator} 
      idx={idx} 
    />
  );
})}

内容的提问来源于stack exchange，提问作者JSON_Derulo