Javascript 在接受数组并返回随机值的简单函数中返回js错误

我得到了一个我无法计算的错误，它是关于一个函数，它接受一个数组并从中返回一个随机值。我上次使用了相同的函数，没有出现这样的错误

helpers.js

function choice(arr) {
  let randomIndex = Math.floor(Math.random() * 3);
  return arr[randomIndex];
}

export { choice };

box.js

import React, { Component } from 'react';
import {choice} from './helpers';
 import './Box.css'

class Box extends Component {
    static defaultProps = {
        allColors: ["purple", "magenta", "violet", "pink"]
    };
    constructor(props){
        super(props);
        this.state = {color: choice(this.props.allcolors)};
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){

    }
    render(){
        return(
            <div className="Box" style={{backgroundColor: this.state.color}
            } onClick={this.handleClick}>

            </div>
        );
    }
}

export default Box;

import React，{Component}来自'React'；
从“./helpers”导入{choice}；
导入“./Box.css”
类框扩展组件{
静态defaultProps={
所有颜色：[“紫色”、“洋红”、“紫色”、“粉色”]
};
建造师（道具）{
超级（道具）；
this.state={color:choice（this.props.allcolors）}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
}
render（）{
返回(
);
}
}
导出默认框；

这里是错误

---

您的代码中有两个错误：

this.props.allcolors

未定义，因为您已将prop

allcolors

设置为大写字母“C”

在您的特定场景中，这可能不是问题，但通常情况下，

选项

函数不会给出您想要的结果。它现在仅适用于长度为3的数组。要解决此问题，您可以将

3

更改为

arr.length

，如下所示：

---

代码中有两个错误：

this.props.allcolors

未定义，因为您已将prop

allcolors

设置为大写字母“C”

在您的特定场景中，这可能不是问题，但通常情况下，

选项

函数不会给出您想要的结果。它现在仅适用于长度为3的数组。要解决此问题，您可以将

3

更改为

arr.length

，如下所示：

---

您是否尝试在componentDidMount中调用您的函数？不，我是初学者，对生命周期方法不太了解。我只是跟着一个教程，反复检查了很多次代码，但在教程中它可以工作，但在我的教程中没有。你是否尝试在componentDidMount中调用你的函数？不，我是初学者，对生命周期方法不太了解。我只是在遵循一个教程，并反复检查代码多次，但在教程中它的工作，但不是在我的，这是不时发生的。。。不客气！如果您愿意，您可以将此答案标记为已接受：）这种情况时有发生。。。不客气！如果愿意，您可以将此答案标记为已接受：）

function choice(arr) {
  let randomIndex = Math.floor(Math.random() * arr.length);
  return arr[randomIndex];
}