解构道具 object 返回 undefined

Question

我正在尝试在反应中创建一个数据网格，并且在访问我的道具中的数据时遇到了麻烦。 每次我尝试访问数据或解构道具时，我的控制台都会显示“未定义”。

当道具是 arrays 的 object （对象）时，我才收到此错误。 当只使用 object 字符串做同样的事情时，它似乎工作正常 - 所以我觉得我在这里缺少一些基本的东西。

在以下摘录中，为简洁起见，我删除了一些代码。 在一个文件中，我有以下内容：

let inputRows = [
    { id: 0, title: "Task 1", complete: 20 },
    { id: 1, title: "Task 2", complete: 40 },
    { id: 2, title: "Task 3", complete: 60 }];
let inputCols = [
    { key: "id", name: "ID", editable: true },
    { key: "title", name: "Title", editable: true },
    { key: "complete", name: "Complete", editable: true }];
let matrixExample1 = {inputRows, inputCols};

const Tabs=(props) => {
    return (
        <div>
            <MatrixParameter props={matrixExample1}>
        <div>
    );

在 MatrixParameter 文件中，我有以下内容：

const MatrixParameter = (props) => {
    console.log(props);

    let {
        inputRows,
        inputCols
    } = props;

    console.log(props);
    console.log(props.inputRows);
    console.log(inputRows);

    return (
        <*removed*>
    )

Console.log 返回以下内容：成功读取前两个日志的道具，但返回未定义的下两个日志。 我的代码中删除的部分返回一个错误，说 inputRows 是未定义的。 这是怎么回事？

（编辑：正如答案所建议的那样，我对字符串的 object 没有做同样的事情。错误是使用<MatrixParameter props="matrixExample1"/>和/或未能补偿 object 的错误传递为此，使用 (props) 而不是 ({props} )。

Answer 1

正如评论和其他内容中所解释的那样， <MatrixParameter props={matrixExample1}>导致功能组件（名为props ）的参数是具有.props属性的 object 。

但是，我认为您实际上要做的是使用 jsx 传播属性，而不是更改解构以使用它

<MatrixParameter {...matrixExample1} />

这相当于

<MatrixParameter inputRows={inputRows} inputCols={inputCols} />

Answer 2

您已将它们作为 object 传递，键值为props 。 所以它应该被破坏如下。

let {
        inputRows,
        inputCols
    } = props.props;

你也可以使用这种销毁方法：

   let {
        props:{
        inputRows,
        inputCols
        }
    } = props;

Answer 3

您正在传递道具作为 MatrixParameter 的道具来修复您需要使用它的代码

props.props 
 //or like this 
MatrixParameter = ({props})=>