反应函数从数组错误生成随机名称答案

【问题标题】：React Function to Generate random name from Array error反应函数从数组错误生成随机名称
【发布时间】：2021-01-01 20:29:17
【问题描述】：

我在 react app 中的 RandomName 组件中的组件“TypeError: Cannot read property 'length' of undefined”出现错误。我做错了什么？

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

【问题讨论】：

“我做错了什么？”在问题之前，您从字面上发布了您自己问题的答案：“无法读取未定义的属性'长度'”。 names 是 undefined。
names 是数字。你找不到它的长度

标签： reactjs react-hooks jsx react-component

【解决方案1】：

您可以先生成一个数组，然后使用faker 将假名称放入其中。

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

【讨论】：

【解决方案2】：

您上面的代码似乎是正确的，但您可以传递 '' 而不是 0。但是从 Github repo 我注意到你没有在 App.js 中传递名称。

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

Updated Code

【讨论】：

【解决方案3】：

你有 3 种方法

使用 typescript 检查 props 数据类型

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=['Mark', 'Steve', 'Tom']

函数随机名称（）{ 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>
);

}

导出默认随机名称

【讨论】：