如何每 10 秒在数组中显示一个随机字符串

Question

它与console.log一起使用，它必须显示在前面

render(){
 var myArray = [
    "Apples",
    "Bananas",
    "Pears"
  ];

  var randomItem = myArray[Math.floor(Math.random()*myArray.length)];
  var intervalId = setInterval(() => {
    var timoutId = setTimeout(() => { 
        console.log(randomItem);
    }, 1000);
 }, 10000);
   return(
    <div>randomItem</div>
   )
 }

console.log 每十秒显示一个随机字符串，但在 return() 上不起作用

Answer 1

1. 移动组件内部的设置间隔确实安装（否则您将在每次组件渲染时创建间隔）
2. 用空字符串初始化 state
3. 间隔内的 setState 这将更新 state 并导致组件重新渲染
4. 在渲染中使用 state function
5. 在 componentWillUnmount 中清除间隔

 class SomeComponent extends React.Component{ state={ randomItem:'' } myArray = [ "Apples", "Bananas", "Pears" ]; randomItemGenerator = () => ( this.myArray[Math.floor(Math.random()*this.myArray.length)] ) componentDidMount(){ this.interval = setInterval(() => { this.setState({randomItem:this.randomItemGenerator()}) }, 1000) } componentWillUnmount(){ this.interval && clearInterval(this.interval) } render(){ return( <div>{this.state.randomItem} - {Math.floor(Math.random()*100)}</div> ) } } ReactDOM.render( <SomeComponent />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 2

  const [rndmItem, setRndmItem] = useState();

  const myArray = ["Apples", "Bananas", "Pears"];

  const timoutId = setTimeout(() => {
    var randomItem = myArray[Math.floor(Math.random() * myArray.length)];
    console.log(randomItem);
    setRndmItem(randomItem);
  }, 1000);
  return <div>{rndmItem}</div>;

Answer 3

你的反应组件渲染 function 应该只返回你的应用程序在给定 state 中的外观表示。

因此，您不应该在渲染 function 内进行任何更改。

如果您使用 class 组件，您可以通过 class 方法和 React 内置生命周期方法来处理您的应用程序 state如何更改。 这是一个例子：

 class App extends React.Component { state = { item: '' } interval = null myArray = ["Apples", "Bananas", "Pears"] randomItem = () => this.myArray[Math.floor(Math.random() * this.myArray.length)] componentDidMount() { this.interval = setInterval(() => { this.setState({item: this.randomItem()}); }, 10000); } componentWillUnmount() { clearInterval(this.interval) } render() { return <p>{this.state.item}</p> } } ReactDOM.render(<App />, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 4

 class SomeComponent extends React.Component{ state={ randomItem:'' } myArray = [ "Apples", "Bananas", "Pears" ]; randomItemGenerator = () => ( this.myArray[Math.floor(Math.random()*this.myArray.length)] ) componentDidMount(){ this.interval = setInterval(() => { this.setState({randomItem:this.randomItemGenerator(i)}) }, 1000) } componentWillUnmount(){ this.interval && clearInterval(this.interval) } render(){ return( <div>{this.state.randomItem} - {Math.floor(Math.random()*100)}</div> ) } } ReactDOM.render( <SomeComponent />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 5

你得到的是什么？ 另外，返回这里时使用 JSX。 试试 {randomItem}