Ошибка типа: невозможно прочитать свойство 'длина' из неопределенного в reactjs - PullRequest
Новая
       67

Ошибка типа: невозможно прочитать свойство 'длина' из неопределенного в reactjs

0 голосов
/ 03 мая 2020

Я сталкиваюсь с проблемой, когда пытаюсь вернуть длину массива в реакции. ошибка: «TypeError: Невозможно прочитать свойство« length »с неопределенным значением. Я поместил это в другой дочерний компонент, и он работает, но когда я попытался в NavBar, он просто показывает ошибку. 

import React from 'react';
import './NavBar.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCartPlus } from '@fortawesome/free-solid-svg-icons';

const NavBar = (props) => {
    const order = props.cart
    return (
        <div className='container-fluid'>
            <nav className="navbar navbar-expand-lg navbar-light  justify-content-md-between justify-content-center flex-wrap">
                <a href="/"><img src="https://i.ibb.co/NZcQbJM/logo2.png" alt="Red Onion Food"/></a>

                <div>
                    <a href="/" className='nav-item' > <FontAwesomeIcon icon={faCartPlus} /></a>
                    <a href="/" className='nav-item login'>Login</a>
                    <a href="/" className='nav-item'><button className="btn btn-danger btn-rounded">Sign Up</button></a>
                </div>
            </nav>
            <div><h6>{order.length}</h6></div>
        </div>
    );
};

export default NavBar;

Я не знаю, что делать !!!

Ответы [ 3 ]

1 голос
/ 03 мая 2020

Вам необходимо замкнуть рендер, основываясь на существовании массива. Вы пытаетесь отрендерить длину order до того, как опора станет доступной.

Попробуйте выполнить следующее: 

<div><h6>{order && order.length}</h6></div>
0 голосов
/ 03 мая 2020

Другие ответы в значительной степени разрешили проблему, то есть вы пытаетесь буквально сказать undefined.length, так как опора order не определена на каком-то этапе при создании / обновлении компонента.

Но есть еще более чистое решение для этого - IMO - order?.length.

И логика c из what-if-not (из ответа @ arun-kumar) - также может записывается как - order?.length ?? 0 или order?.length || 0.

Подробнее об этом -

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

  3. https://github.com/facebook/create-react-app/releases/tag/v3.3.0 - CRA v3.3 уже поддерживает их.

Обновление - Деструктуризация также является более чистым способом. Я много использовал его, поскольку он позволяет инициализировать реквизит, если он не определен, но легко может быть перезаписан другим типом значения - поэтому я думаю, что опциональное сцепление имеет преимущество перед ним.

0 голосов
/ 03 мая 2020

Неопределенная ошибка из-за order is not available that time, поэтому вам нужно проверить наличие order и затем выполнить. 

{order ? order.length : 0}
...