如何使用条件钩子和反应钩子设置随机初始状态？ [英] How can I set a randomized initial state using a conditional and React Hooks?

问题描述

此示例模拟掷硬币。
我想随机化硬币的初始状态。页面第一次加载时可能会显示标题。下一次，反面。为此，我使用由Math方法生成的随机数和基于该随机数(偶数表示正面，奇数表示反面)的条件来确定硬币的表面。
该值需要在初始呈现时显示。

我还希望使用React的Hooks将值存储在状态中，以便稍后在我的应用程序中使用。如何使用挂钩设置随机初始状态值？

下面是我正在使用的代码。它目前不起作用，我不确定为了实现目标我做错了什么：

import React, { useState } from 'react';
import './App.css';

function App() {

  const [coin, setCoin] = useState(randomizePlayer())

  const randomizePlayer = () => {
    let number = Math.floor(Math.random() * 10) + 1
    return (number % 2 === 0) ? setCoin('Heads') : setCoin('Tails')
  }

    return (
      <div className="App">
        The coin is showing {coin}
      </div>
    );
  }

export default App;

我是Hooks API的新手，正在使用本练习学习。

感谢任何帮助！

推荐答案

我将重写此代码，如下所示：

const randomizePlayer = () => {
  const number = Math.floor(Math.random() * 10) + 1
  return (number % 2 === 0) ? 'Heads' : 'Tails'
}

function App() {
  const [coin, setCoin] = useState(randomizePlayer())

  return (
    <div className="App">
      The coin is showing {coin}
    </div>
  );
}

randomizePlayer不需要调用setState；让它只返回值。useState可以将该值用作其初始状态。

还要澄清一下：useState只被调用一次。如果希望coin具有不同的值，则使用此安装程序执行此操作的方法是重新装入组件(重新加载页面)。

State hooks docs

这篇关于如何使用条件钩子和反应钩子设置随机初始状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！