嘿，我有几个观察，关于你的代码和一个可能的解决方案：

• 不确定button.value是什么？你希望返回什么？value在button中不存在，button实际上也是一个数组，如果你想要里面的值，你需要再次遍历数组。
• 你迟早会得到一个错误的组件，不知道哪个版本的React你使用，但需要开始与大写字母，和cammel的情况。所以它是“const ButtonBox”检查这里：ReactJS component names must begin with capital letters?
• flat声明是错误的，它应该是btnValues.map（（btn，i）=> { return（...）}）.flat，但是在这个特定的例子中，这仍然对你没有帮助，所以回到我的第一个问题，你期望的输出是什么？
• 关于子问题，A_mohii的建议是可验证的解决方案，但是你可以欺骗React，通过用指针函数声明一个常量，然后在返回{}之间调用它。

无论如何，我做了一个完整的codesandbox，检查这是否是你需要的，check this link

看起来你试图渲染一个对象，而对象的键是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>
  );
}

型
这将解决您所面临的错误。