С дополнительным получением цепочки TypeError: невозможно прочитать данные свойства undefined

Question

Я получаю сообщение об ошибке:

instrument.js:110 TypeError: Cannot read property 'data' of undefined
    at useScenariosGraphql.tsx:128
    at _o (react-dom.production.min.js:231)
    at Du (react-dom.production.min.js:278)
    at t.unstable_runWithPriority (scheduler.production.min.js:19)
    at ql (react-dom.production.min.js:130)
    at Fu (react-dom.production.min.js:277)
    at react-dom.production.min.js:277
    at A (scheduler.production.min.js:17)
    at MessagePort.x.port1.onmessage (scheduler.production.min.js:14)

Это происходит здесь:

  useEffect(() => {
    let message: string | undefined;
    const error = createError ?? updateError;
    if (error) {
      if (
        // @ts-ignore
        error.graphQLErrors?.[0].data?.messages?.[0] // <---- ERROR HERE Line 128
      )
        // @ts-ignore
        message = error.graphQLErrors?.[0].data?.messages?.[0];
      if (error?.message.includes('same organization as the scenario'))
        message =
          'To create a new scenario, all target areas must be in the same organization as that scenario. You can fix this in the data tab at the top.';
      // @ts-ignore
      if (typeof error?.graphQLErrors?.[0].data?.errors?.[1]?.data?.messages?.[0] === 'string')
        // @ts-ignore
        message = error?.graphQLErrors?.[0].data?.errors?.[1]?.data?.messages?.[0];
      if (!message) {
        message = `Something went wrong with the network request`;
        console.log(error.message);
      }

      addToast(message, 10000);
    }
  }, [addToast, createError, updateError]);

@ts-ignore потому что тип ошибки GraphQL не имеет свойства данных, но Возвращаемый объект иногда поступает из бэкэнда GrahphQL.

В любом случае, есть он или нет, почему я не могу прочитать data of undefined, когда я использую необязательную цепочку? Разве он не должен принимать значение undefined, если он не находит индекс 0 массива graphQLErrors?

Мы знаем, что переменная error существует, благодаря оператору if. Итак, теперь я проверяю error.graphQLErrors[0], что равно undefined ... но именно поэтому я использую необязательную цепочку вместо подробного:

  if (
    error.graphQLErrors[0] &&
    error.graphQLErrors[0].data &&
    error.graphQLErrors[0].data.messages[0]
  )

Но это работает не так, как задумано .. . помогите, пожалуйста.

---

Изменить

Хорошо, я вижу, мне тоже нужен ? после индекса. Первый вопросительный знак говорит, существует ли индекс на самом деле, а второй - если значение в этом индексе не равно nulli sh in variable?.[0]?

Answer 1

Отсутствует необязательный оператор цепочки ? при доступе к массиву graphQLErrors:

error.graphQLErrors?.[0].data?.messages?.[0]

Изменить на:

error.graphQLErrors?.[0]?.data?.messages?.[0]