解構道具 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})=>