Question

当使用 Object.entries 检索值时，如何在 Typescript React App 中正确输入从 JSON 对象（API 调用）检索到的空值？

2020-04-18

523

reactjs typescript

名为“questions”的对象如下所示：

 [{
    "id": 1,
    "paths": {
        "Yes": 2,
        "No": null
    }
},
{
    "id": 2,
    "paths": {
        "Yes": 5,
        "No": null
     }
 }
]

我输入了以下响应：

type Paths =  {
[key: string]: number;}

type Grid = {
paths:Paths;
id:number;
questions: {};
onUpdateQuestion(selectedQuestion: number): void;
}

我创建了一个如下所示的功能组件：

function QuestionGrid ({questions, onUpdateQuestion}:Grid) {

const {paths}:Paths = questions  
const pathentries = Object.entries(paths);  // this line is listed as causing the error

    return (    
        <div>

        <div>
            {pathentries.map(([key, value]) => (

            <button className="button" key={key}

            onClick={() => onUpdateQuestion(value)}>
                {key}

            </button> 


            ))}

        </div>

        </div>
    )}

我在没有 typescript 的 React 应用中运行了该组件，但使用 typescript 时出现以下错误： TypeError：无法将 undefined 或 null 转换为对象

Answer 1

Object.entries() 在数组上无效。您从 questions 中解构了 paths ，它是一个数组。

您可以尝试：

const pathentries = paths.map(path => Object.entries(path)).flat();

它应该保留您稍后在脚本中想要的格式

[ [ 'Yes', 2 ], [ 'No', null ], [ 'Yes', 5 ], [ 'No', null ] ]

Answer 2

您正在尝试从 questions 中解构 paths 。 questions 没有 paths 属性，因为它是一个列表。您的问题列表有多个对象，这些对象确实有一个 paths 属性。

那么，是不是您不想将整个问题列表传递给您的 QuestionGrid ，而是传递一个问题？

这行不通，但这正是目前发生的情况：

const {paths}:Paths = [
  {
    "id": 1,
    "paths": {
      "Yes": 2,
      "No": null
    }
  }
]

这会起作用：

const {paths}:Paths = {
  "id": 1,
  "paths": {
    "Yes": 2,
    "No": null
  }
}

也许这个小小的 stackblitz 可以帮助您： https://stackblitz.com/edit/react-ts-gnhhd8