显示处于不工作状态的集合中的随机项



我试图有它,所以当一个人点击你的财富按钮,一个随机的财富出现。相反,财富只是全部显示和onClick不按预期工作。我不知道我在哪里搞砸了。如有任何帮助,不胜感激。

import React from "react";
import {Link} from "react-router-dom"
class Fortune extends React.Component {
constructor(props) {
super(props);
this.state = {
fortunes: [
"An exciting opporunity lies ahead",
"A long time friend will brirng wise advice in the coming week",
"You will find great fortunes in unexpected places",
"Never give up... Unless you want to thats cool too",
"111",
"222",
"333",
"444",
"Maybe a nap is what you need",
"Don't Text Your EX!"
],
fortune: ""
}
}
componentDidMount() {
this.getFortune();
}
getFortune = () =>  {
let rand = Math.floor(Math.random() * (this.state.fortunes.length) + 0)
console.log(rand);
this.setState({
fortune: this.state.fortunes[rand]
})
}

render() {
return (
<body>
<div className="home-buttons-wrapper">

<button onClick={Fortune.getFortune}>Your Fortune</button>
<h5>{this.state.fortunes}</h5>

</div>
</body>
)
}
}
console.log('getFortune');
export default Fortune; 
onClick={Fortune.getFortune}

应:

onClick={this.getFortune}

<h5>{this.state.fortunes}</h5>

不应该以's'结尾(这就是为什么你会看到整个集合)

<h5>{this.state.fortune}</h5>

最新更新