函数每 10 秒返回一个随机字符串,我想在函数开头的字符串数组中设置一个单词
我尝试在生命周期开始时设置内部状态
componentDidMount(){
this.setState({
randomItem:
this.setState({randomItem:this.randomItemGenerator()})
},
this.interval = setInterval(() => {
this.setState({randomItem:this.randomItemGenerator()})
}, 10000)
});
-组件
class Word extends Component {
state={
randomItem:''
}
myArray = [
"esplendor",
"diciendo",
"impredecible",
"problema",
"terreno",
"instante",
];
randomItemGenerator = () => (
this.myArray[Math.floor(Math.random()*this.myArray.length)]
)
componentDidMount(){
this.setState({
randomItem: this.setState({randomItem:this.randomItemGenerator()})
},
this.interval = setInterval(() => {
this.setState({randomItem:this.randomItemGenerator()})
}, 10000)
});
render(){
return(
<div><h3>{this.state.randomItem}</h3></div>
)
}
}
在ComponentDidMount之前还有另一个生命周期吗?
最佳答案
由于 myArray
和 randomItemGenerator
不使用 props
或其他状态,因此您可以移动组件的外部并使用它们当你初始化状态时。
const myArray = [
"esplendor",
"diciendo",
"impredecible",
"problema",
"terreno",
"instante",
]
const randomItemGenerator = () => (
myArray[Math.floor(Math.random() * myArray.length)]
)
class Word extends React.Component {
state = {
randomItem: randomItemGenerator()
}
componentDidMount() {
this.interval = setInterval(() => {
this.setState({
randomItem: randomItemGenerator()
})
}, 10000)
}
componentWillUnmount() { // clear the interval when the component is unmounted
clearInterval(this.interval);
}
render() {
return (
<div><h3>{this.state.randomItem}</h3></div>
)
}
}
ReactDOM.render(
<Word />,
root
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
但是,您可能想从 props 中获取单词数组。在这种情况下,将 randomItemGenerator
更改为接受数组作为参数,并在调用函数时传递相关属性(示例中的 words
)。
const randomItemGenerator = (words) => (
words[Math.floor(Math.random() * myArray.length)]
)
class Word extends React.Component {
state = {
randomItem: randomItemGenerator(this.props.words)
}
componentDidMount() {
this.interval = setInterval(() => {
this.setState({
randomItem: randomItemGenerator(this.props.words)
})
}, 10000)
}
componentWillUnmount() { // clear the interval when the component is unmounted
clearInterval(this.interval);
}
render() {
return (
<div><h3>{this.state.randomItem}</h3></div>
)
}
}
const myArray = [
"esplendor",
"diciendo",
"impredecible",
"problema",
"terreno",
"instante",
]
ReactDOM.render(
<Word words={myArray} />,
root
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
关于javascript - 设置开始时的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58616497/