如何在 React 中使用钩子预初始化状态？

Posted 2023-02-22

【中文标题】如何在 React 中使用钩子预初始化状态？

【英文标题】：How can I pre initialise state with hooks in React?

【发布时间】：2019-04-12 09:18:09

【问题描述】：

基本上在类组件中，我们使用如下的初始值在构造函数中预先初始化状态。

     constructor(props)
          super(props);
          this.state = 
                 count: 0
          
     

但是在引入钩子之后，所有的类组件都变成了有状态的功能组件。

但我的问题是如何使用 React v16.7.0 中的钩子将计数状态预初始化为 0

【参考方案1】：

这是文档： https://reactjs.org/docs/hooks-state.html

文档中的示例显示：

const [count, setCount] = useState(0);

传入useState的参数（例如本例中的“0”）是初始值。

【讨论】：

好的，如果我想初始化大约 20 个不同的状态变量怎么办？我是否需要使用 useState(0, “test”, 23, “male”, ..... 等等); ?

如果您希望它们成为单独的状态变量，那么您将为每个变量调用一次“useState”（请参阅​​同一文档页面的“使用多个状态变量”部分）。或者，您可以将状态变量设置为具有您想要的任何结构的对象（例如 useState( count: 0, gender: "male" )。

【参考方案2】：

如果您想在加载数据后设置初始状态（从 api 获取数据），您可以在 React 挂钩中使用“useEffect”。它等于类组件中的“componentWillReceiveProps”。因此，当您在 useEffect 中设置状态值时，请确保避免无限循环，例如 ..

const [count,setcount] = useState(0) 

 useEffect(()=>
    setcount(api.data.count) // api.data.count from api after update store
  ,[])

【参考方案3】：

下面是一个示例，说明如何在类中初始化状态与使用钩子的函数：

基本上useState()的第一个参数是初始状态。

class CounterClass extends React.Component 
  constructor(props) 
    super(props);
    this.state =  count: 0 ;
  
  
  render() 
    return <div>
      <strong>Class: </strong>
      <span>Count: this.state.count</span>&nbsp;
      <button onClick=() => this.setState( 
        count: this.state.count + 1
      )>Increase</button>
    </div>;
  


function CounterFunction() 
  const [count, setCount] = React.useState(0); // Initial state here.
  return (
    <div>
      <strong>Function: </strong>
      <span>Count: count</span>&nbsp;
      <button onClick=() => 
        setCount(count + 1)
      >Increase</button>
    </div>
  );


ReactDOM.render(
  <div>
    <CounterClass />
    <hr/>
    <CounterFunction />
  </div>
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

【讨论】：

谢谢。如果我还有一个状态字符串变量并且我想用初始值和计数预初始化它，你能帮我理解怎么办吗？如何使用 useState 预初始化多个变量？

是的，您可以在组件中拥有任意数量的useState。如果它变得太多，您可以使用一个useState 和一个对象作为值。请参阅此链接以获取示例 - codesandbox.io/s/vv8ypvp790 您可以在 SO 上提出另一个问题，我可以在那里回答。

【参考方案4】：

根据 React 文档，您可以将初始值传递给 useState 挂钩。

const [state, setState] = useState(initialState);

https://reactjs.org/docs/hooks-reference.html#usestate

【讨论】：

好的，如果我想初始化大约 20 个不同的状态变量怎么办？我是否需要使用 useState(0, “test”, 23, “male”, ..... 等等); ?

您应该为每个变量声明它。 reactjs.org/docs/…