Question

React 函数根据数组错误生成随机名称

2020-09-15

1202

reactjs react-hooks jsx react-component

我的 react 应用中的 RandomName 组件出现错误“TypeError: 无法读取未定义的属性‘length’”。我做错了什么？

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

Answer 1

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

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

Answer 2

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

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

更新代码

Answer 3

您有 3 种方法

use typescript to check props data type

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

use below code for check propTypes

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

and use below code to define function

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