React中数组对象属性传递组件时渲染报错的解决咨询

定义的数组：

const actions = [
    {
      header: "Money",
      type: "icon",
      icon: <Icon.DollarSign
        key={5}
          style={{
            display:  "block" ,
        }}
        size={20}
        color="#88CFE0"
        onClick={() => console.log('Dollar')}
        className="cursor-pointer"
      />,
      visible: true,
    },
  ]

将数组作为props传入组件并渲染的代码：

export const ActionsPersonalice = ({
  actions,
  action,
  data,
  validateDataPoa,
}) => {
    return (
        <>
          {actions.map((item, index) => {
            if (item.type == "button") {
              return (
                <button
                  key={index}
                  style={{
                    fontWeight: "400",
                    color: "#88CFE0",
                    textDecoration: "underline",
                    border: "none",
                    backgroundColor: "transparent",
                    display: item.visible ? "block" : "none",
                  }}
                  className="cursor-pointer"
                  type="button"
                >
                  {item.header}
                </button>
              );
            }
            if (item.type == "icon") {
               return item.icon
            }
          })}
        </>
    )
}

出现的错误：

Objects are not valid as a React child (found: [missing argument]). If you meant to render a collection of children, use an array instead.

方案一：为返回的Icon元素添加外层Key #

React要求map循环返回的每个顶级元素必须带有唯一key属性。虽然你在Icon组件内部设置了key，但这无法满足map循环对顶级元素的key要求。修改子组件中icon类型的返回逻辑：

if (item.type == "icon") {
  // 用Fragment包裹Icon，添加map循环所需的key
  return (
    <React.Fragment key={index}>
      {item.icon}
    </React.Fragment>
  );
}

方案二：改用配置对象传递（更推荐） #

直接在数组中存储JSX元素灵活性差，还容易引发渲染异常。建议改为存储Icon的配置信息，在子组件中动态渲染组件：

1. 修改actions数组结构：

const actions = [
    {
      header: "Money",
      type: "icon",
      iconConfig: {
        component: Icon.DollarSign,
        size: 20,
        color: "#88CFE0",
        onClick: () => console.log('Dollar'),
        className: "cursor-pointer",
        style: { display: "block" }
      },
      visible: true,
    },
  ]

2. 修改子组件渲染逻辑：

export const ActionsPersonalice = ({
  actions,
  action,
  data,
  validateDataPoa,
}) => {
    return (
        <>
          {actions.map((item, index) => {
            if (item.type == "button") {
              // 原button渲染逻辑保持不变
              return (
                <button
                  key={index}
                  style={{
                    fontWeight: "400",
                    color: "#88CFE0",
                    textDecoration: "underline",
                    border: "none",
                    backgroundColor: "transparent",
                    display: item.visible ? "block" : "none",
                  }}
                  className="cursor-pointer"
                  type="button"
                >
                  {item.header}
                </button>
              );
            }
            if (item.type == "icon") {
              const IconComponent = item.iconConfig.component;
              return (
                <IconComponent
                  key={index}
                  {...item.iconConfig}
                  // 合并visible控制的display样式
                  style={{
                    ...item.iconConfig.style,
                    display: item.visible ? "block" : "none"
                  }}
                />
              );
            }
          })}
        </>
    )
}

这种方式不仅解决了渲染报错问题，还让配置更易于维护和扩展，后续修改Icon属性只需调整配置对象即可，无需改动子组件逻辑。

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