Javascript 分解props对象将返回未定义的_Javascript_Reactjs_Typescript_React Props_Destructuring

Javascript 分解props对象将返回未定义的

javascript reactjs typescript

Javascript 分解props对象将返回未定义的,javascript,reactjs,typescript,react-props,destructuring,Javascript,Reactjs,Typescript,React Props,Destructuring,我正试图在react中创建一个数据网格，但在访问道具中的数据时遇到了问题。每次我尝试访问数据或破坏结构时，我的控制台显示“未定义” 我只是在道具是数组（对象）的对象时才遇到这个错误。当用一个字符串对象做同样的事情时，它似乎工作得很好——所以我觉得我遗漏了一些基本的东西在以下摘录中，为了简洁起见，我删除了一些代码。在一个文件中，我有以下内容： let inputRows = [ { id: 0, title: "Task 1", complete: 20 },

我正试图在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>
    );

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

    let {
        inputRows,
        inputCols
    } = props;

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

    return (
        <*removed*>
    )

let inputRows=[
{id:0，标题：“任务1”，完成时间：20}，
{id:1，标题：“任务2”，完成时间：40}，
{id:2，标题：“任务3”，完成：60}]；
让inputCols=[
{key:“id”，name:“id”，可编辑：true}，
{key:“title”，name:“title”，可编辑：true}，
{key:“complete”，name:“complete”，可编辑：true}]；
让Matrix Example1={inputRows，inputCols}；
常量选项卡=（道具）=>{
返回(
);

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

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>
    );

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

    let {
        inputRows,
        inputCols
    } = props;

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

    return (
        <*removed*>
    )

常量矩阵参数=（道具）=>{
控制台日志（道具）；
让{
输入，
输入
}=道具；
控制台日志（道具）；
控制台日志（props.inputRows）；
控制台日志（inputRows）；
返回(
)

Console.log返回以下内容：我的代码中被删除的部分返回一个错误，说inputRows未定义。发生了什么

（编辑：正如答案所建议的，我没有对字符串对象执行相同的操作。错误是使用
错误地传递对象，和/或使用（props）而不是（{props}）来弥补错误）

let {
        inputRows,
        inputCols
    } = props.props;

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

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

您已将它们作为键值为

props

的对象传递。因此应按如下方式对其进行分解

let {
        inputRows,
        inputCols
    } = props.props;

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

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

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

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

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

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

如注释和其他说明所述，

导致功能组件（名为

props

）的参数成为具有

.props

属性的对象

但是，我认为您实际上想做的不是改变解构来处理它，而是使用jsx扩展属性

<MatrixParameter {...matrixExample1} />

这相当于

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