解构道具对象 returns 未定义

Question

我正在尝试在 React 中创建一个数据网格，但我在访问道具中的数据时遇到了问题。每次我尝试访问数据或破坏道具时，我的控制台都会显示“未定义”。

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

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

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 returns 以下内容： reading the props successfully for the first two logs, but returning undefined for the next two logs. 我的代码的删除部分 returns 一个错误，说 inputRows 未定义。怎么回事？

(编辑：正如答案所建议的，我没有对字符串对象做同样的事情。错误是使用 <MatrixParameter props="matrixExample1"/> and/or 未能通过使用 (props) 而不是 ({props}) 来弥补这一点。

Answer 1

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

let {
        inputRows,
        inputCols
    } = props.props;

你也可以使用这种破坏方式：

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

Answer 2

您正在将道具作为 MatrixParameter 的道具传递以修复您的代码，您需要像这样使用它

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

Answer 3

正如评论和其他人所解释的，<MatrixParameter props={matrixExample1}> 导致功能组件（名为 props）的参数成为具有 .props 属性的对象.

但是，我认为您真正想做的是使用 jsx spread 属性，而不是更改解构以与之配合使用

<MatrixParameter {...matrixExample1} />

相当于

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

解构道具对象 returns 未定义

Destructuring a props object returns undefined

javascript

reactjs

typescript

react-props

destructuring