通过映射函数中的udsing数组来反应子级时出错

Question

我正在尝试通过 nextjs 和 tailwind 开始编写一个计算器，但在第一步中我遇到了问题。

这是主页代码：

import Screen from './component/Screen'
import Wrapper from './component/wrapper'
import ButtonBox from './component/buttonBox'
import Button from './component/button'
const btnValues=[
  ["C","+-","%","/"],
  [7,8,9,"*"],
  [4,5,6,"-"],
  [1,2,3,"+"],
  [0,".","="],
]
console.log(btnValues);
export default function Home() {

  return (
    <Wrapper>
     <Screen />
      <ButtonBox> 
        {btnValues.flat().map((btn,i)=>{ return (
          <Button value={btn} key={i}/>)}
        )}
      </ButtonBox>
    </Wrapper>
  )
}

因为它是一个数组，我尝试使用 map ，但我面临一个错误：

“内部错误：错误：对象作为 React 子对象无效（找到：带有键 {value} 的对象）。如果您打算渲染子对象的集合，请改用数组。”

这也是 ButtonBox 的内容：

const buttonBox = ({children}) => {
  return (
    <div className='mt-16'>
      {children}
    </div>
  )
}

export default buttonBox

Wrapper 也和 ButtonBox 一样

当我已经使用过时，我不知道使用数组意味着什么！

Answer 1

您似乎正在尝试将带有键的对象渲染为 React 子对象。 React 不允许你直接渲染对象。相反，您应该渲染一组组件或单个组件。

根据您的代码，您应该更改

ButtonBox

组件以接受按钮数组，然后渲染数组中的每个按钮。以下是如何执行此操作的示例：

import React from 'react';

const buttonBox = ({ buttons }) => {
  return (
    <div className='mt-16'>
      {buttons.map((button, i) => (
        <Button key={i} value={button.value} />
      ))}
    </div>
  );
};

export default buttonBox;

然后，在您的

Home

组件中，您应该将

btnValues

数组传递给

ButtonBox

组件：

import React from 'react';
import Screen from './component/Screen';
import Wrapper from './component/wrapper';
import ButtonBox from './component/buttonBox';
import Button from './component/button';

const btnValues = [
  ["C", "+-", "%", "/"],
  [7, 8, 9, "*"],
  [4, 5, 6, "-"],
  [1, 2, 3, "+"],
  [0, ".","="],
];

console.log(btnValues);

export default function Home() {

  return (
    <Wrapper>
     <Screen />
      <ButtonBox buttons={btnValues} />
    </Wrapper>
  );
}

这将解决您面临的错误。