在 React 中为 useState 设置条件初始值

作者

在 React 中为 useState 设置条件初始值

Set a conditional initial value for useState in React

在 React 中为 useState 设置条件初始值：

  1. 将函数传递给useState挂钩。
  2. 使用条件来确定状态变量的正确初始值。
  3. 该函数只会在初始渲染时调用。
应用程序.js
import {useState} from 'react';

export default function App() {
  // 👇️ passing function to useState
  const [num, setNum] = useState(() => {
    if (2 * 2 === 4) {
      return 4;
    }

    return 42;
  });

  // 👇️ using a ternary
  const [str, setStr] = useState('hi'.length === 2 ? 'hello world' : 'test');

  return (
    <div>
      <h2>num is: {num}</h2>

      <h2>str is: {str}</h2>
    </div>
  );
}

在第一个示例中，我们将一个函数传递给
useState挂钩。

在第一次渲染期间，该num变量将存储我们从传递给 的回调函数返回的任何内容。 useState

我们可以在函数中使用条件来确定状态变量的正确值。

useState当初始状态是昂贵计算的结果时，将函数传递给方法很有用。

我们传递给的函数useState只会在初始渲染时被调用。

应用程序.js
const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

这种模式称为
惰性初始状态。

如果您需要一个快速的单行条件来确定初始状态值，请使用
三元运算符。

应用程序.js
import {useState} from 'react';

export default function App() {
  // 👇️ using a ternary
  const [str, setStr] = useState('hi'.length === 2 ? 'hello world' : 'test');

  return (
    <div>
      <h2>str is: {str}</h2>
    </div>
  );
}

三元运算符与语句非常相似if/else。

如果问号左边的值为真，则运算符返回冒号左边的值，否则返回冒号右边的值。

应用程序.js
const result1 = 5 === 5 ? 'yes' : 'no';
console.log(result1); // 👉️ "yes"

const result2 = 5 === 10 ? 'yes' : 'no';
console.log(result2); // 👉️ "no"

如果字符串hi有一个字符长度2，我们hello world作为
初始状态值返回，否则test
返回。

你可以想象冒号前的值是if块，冒号后的值是else块。

确保
在使用 React 时不要有条件地调用钩子
。

我还写了一篇关于
如何为输入字段设置默认值的文章。