Как правильно ввести нулевое значение в приложении реакции на машинописный текст, полученном из объекта JSON (вызов API) при использовании Object.entries для получения значения?

Question

Объект с именем «Вопросы» выглядит следующим образом:

 [{
    "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>
    )}

У меня это работает в приложении React без машинописи, но с машинописью я получаю следующую ошибку: Ошибка типа: невозможно преобразовать неопределенное или нулевое значение в объект

Answer 1

Object.entries() для массива недопустимо. Вы де-структурировали paths из questions, который является массивом.

вы можете попробовать:

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

, который должен сохранить желаемый формат для дальнейшего использования в сценарии

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

Answer 2

Вы пытаетесь удалить структуру paths из questions. questions не имеет свойства paths, поскольку это список. В вашем списке вопросов есть несколько объектов, и эти объекты действительно имеют свойство paths.

Итак, может быть, вы не хотите передавать весь список вопросов вашему QuestionGrid, а один вопрос? ?

Это не сработает, но это именно то, что происходит в данный момент:

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

Это сработает:

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

Может быть, этот маленький стек может помочь вам: https://stackblitz.com/edit/react-ts-gnhhd8