Reactjs React函数从数组错误生成随机名称

我的组件“TypeError:Cannotreadproperty'length'of undefined”在我的中的RandomName组件中出错。我做错了什么

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

import React，{useState}来自“React”；
从“react dom”导入react dom；
函数名（道具）{
const[name，newName]=useState（0）；
常量{names}=props；
返回(
{name}
新名称（名称[Math.floor（Math.random（）*names.length）]）}>
新名称
);
}
ReactDOM.render(
,
document.getElementById（'root'））
);
导出默认随机名称

您可以先生成一个数组，然后使用它来放置假名称

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

---

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

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

你有三种方法

使用typescript检查道具数据类型

并使用下面的代码定义函数

---

我能够让组件像这样工作-感谢大家的帮助：

import React, { useState } from 'react';

导入“./index.css”

常量名称=['Mark'、'Steve'、'Tom']

函数名（）{ const[name，newName]=useState（'Bob'）

返回(
{name}
新名称（名称[Math.floor（Math.random（）*names.length）]）}>
新名称
);

}

---

export default RandomName

“我做错了什么？”您在问题“无法读取未定义的属性‘长度’”之前，逐字逐句地发布了您自己问题的答案<代码>名称为

未定义

名称

为编号。你找不到它的长度

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

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

import React, { useState } from 'react';

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