我想在我的组件中有一个初始状态,但我需要根据一个复杂的if/else语句来设置它.

使用嵌套的三元组语句很快就会变得不可读和不可管理.由于状态应该是 top-level ,所以我不能直接在组件中编写if/Else语句.

例如,假设我需要根据一些给定的属性、从本地存储、从URL、从会话状态或从Cookie设置选定国家/地区的初始状态:

const SomeComponent = ({ useUrl, useLocaleStorage, useSessionStorage, useCookie }) => {
    const [initialCountry, setInitialCountry] = useState(/* logic to check where to read from, for the initial state */);

}

在上面的示例中,我需要将这个简单的JS转换为Reaction-Style:

let initialCountry = 'uk'

if (useUrl) {
   // read from URL and set it
} else if (useCookie) {
   // read from cookie and set it
} else if (useSessionStorage) {
   // read from session storage and set it
} else if (useLocaleStorage) {
   // read from local storage and set it
}

我知道我可以创建一个简单的状态,然后使用useEffect来初始化它.但这使得该州发生了多次变化.我不想这样.我希望initial state是使用复杂的逻辑创建的,而不是changed.

推荐答案

你的问题似乎很含糊. 但以下是一些需要考虑的 Select :

  1. 如果可能的话,用useMemo代替useState.这将确保您只在需要时更新对象(如果需要,您只能初始化一次).
  2. 如果你真的需要状态,使用一个函数来计算你的初始状态(比如const [initialCountry, setInitialCountry] = useState(getCountryState());).也许你可以重用这个函数,以便在需要更新的时候总是返回正确的国家/地区(这样你就可以考虑扩展这个功能,以便在需要的时候返回更新后的国家/地区).
  3. 如果初始化逻辑看起来很复杂,请使用custom hook,如果需要避免过多的内联代码,请考虑将其与第2点提到的函数结合使用
  4. 这是一个独立的建议:在可能的情况下,考虑使用具有可能值的常量,而不是大量的布尔props .

因此,与其使用类似于

const SomeComponent = ({ useUrl, useLocaleStorage, useSessionStorage, useCookie }) => {
  ...
  if (useUrl)...

你可以有这样的东西

const SomeComponent = (props) => {
  ...
  switch (props.sourceToUse) {
    case SOURCES.url:
      ...

Reactjs相关问答推荐

无法使用Apollo客户端GraphQL设置Next.js 14

在react.js的条形图中获取错误&unfined是不可迭代的

如何通过浏览器路由在单独的.jsx文件中使用MUI抽屉?

在Reaction中更新状态时,我将变得未定义

Reaction Hook';useEffect&;有条件呼叫问题:

Redux工具包-useSelector如何通过Reducer引用InitialState?

当项目开始时,它不会从三元运算符(REACT)加载一些tailwind 类名称

React路由dom布局隐藏内容

Gitlab CI和VITE环境变量出现问题

react :输入失go 焦点,输入一个字符,

无法使用react-hook-form和react-places-autocomplete在字段中输入值

useEffect 内的 onClick 和 addEventListener 之间的 click 事件顺序差异

如何在 React 中停止嵌套 Link 和 Button 组件的事件传播?

为什么我会收到此错误:无法在我的react 包上读取 null 的属性(读取useState)?

如何在悬停时更改 MUI 卡内容

下一次导出:未捕获的语法错误:标识符注册表已被声明

React - 仅在变量为真时显示项目

如何在 React JS 上使文本中的单词可点击

找不到元素 - 这是参考问题吗?

Select MenuItem 时 Material-ui 不更改样式