Блог

Главная - Вопросы по программированию - Функция реакции для генерации случайного имени из ошибки массива

Функция реакции для генерации случайного имени из ошибки массива

#reactjs #react-hooks #jsx #react-component

#reactjs #реагирующие крючки #jsx #реагирующий компонент

Вопрос:

Я получаю сообщение об ошибке с моим компонентом «TypeError: не удается прочитать свойство ‘length’ из неопределенного» из моего компонента в моем приложении react «. react app». Что я делаю не так?

 import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function RandomName(props) {
    const [name, newName] = useState(0);

    const { names } = props;
    return (
        <div>
            <h2>{name}</h2>
            <button onClick={() => newName(names[Math.floor(Math.random()*names.length)])}>
                New Name
            </button>
        </div>
    );
}

ReactDOM.render(
    <RandomName names={['Paul', 'David', 'Kevin']} />,
    document.getElementById('root')
);

export default RandomName

Комментарии:

1. «Что я делаю не так?» Вы буквально опубликовали ответ на свой собственный вопрос перед вопросом: «Не удается прочитать свойство ‘length’ неопределенного». names есть undefined .

2. names это число. Вы не можете найти его длину

Ответ №1:

Вы можете сначала сгенерировать массив, а затем использовать faker для добавления в него поддельных имен.

 const a = new Array(50).fill(null)
                       .map(e =>
                   e = faker.fake("{{name.lastName}}, {{name.firstName}}"))

Ответ №2:

Ваш приведенный выше код кажется правильным, но вместо 0 вы можете передать «. Но из репозитория Github я заметил, что вы не передаете имена в App.js .

 <Switch>
    <Route path="/">
            <>
              <RandomName names={['Paul', 'David', 'Kevin']} />
            </>
         </Route>
</Switch>

Обновленный код

Ответ №3:

У вас есть 3 способа

используйте typescript для проверки типа данных реквизитов

 function RandomName({names=[]}:{names:Array<string>}){...}

используйте приведенный ниже код для проверки PropTypes

 import PropTypes from 'prop-types';
.
.
.
RandomName .propTypes = {
names: PropTypes.arrayOf(PropTypes.string)
}

и используйте приведенный ниже код для определения функции

 function RandomName({names=[],...restprops}){...}

Ответ №4:

Я смог заставить компонент работать следующим образом — спасибо всем за вашу помощь:

 import React, { useState } from 'react';

импорт ‘./index.css’

const names=[‘Марк’, ‘Стив’, ‘Том’]

function -() { const [name, newName] = useState(‘Bob’);

 return (
    <div id="RandomName-container">
        <h2>{name}</h2>
        <button onClick={() => newName(names[Math.floor(Math.random()*names.length)])}>
            New Name
        </button>
    </div>
);

}

экспортировать по умолчанию RandomName