在 React Native 中使用 useState 更改文本颜色

Question

我有一个 class color.js，我在其中定义了一些颜色代码，其结构如下：

export default {
  black: '#000',
  white: '#fff',
  yellow: '#C18D00',
  green: '#1AE06A'
}

在我制作的组件中 BookedCard.js 我有许多预订状态，例如已确认、待处理等。根据每个状态，我想更改文本的颜色，例如：

function BookedCard({ status, title, dateTime }) {

    const [ statusColor, setStatusColor ] = useState(color.black)

    switch (status) {
        case 'Pending':
            setStatusColor(color.yellow)
            break;
        case 'Rejected':
            setStatusColor(color.red)
            break;
        case 'Confirmed':
            setStatusColor(color.green)
            break;
        default:
            break;
    }
}

然后我在组件中使用它作为：

<Text style={[styles.status, { color: statusColor }]}>{status}</Text>

显示错误：

Too many re-renders. React limits the number of renders to prevent an infinite loop.

现在，我通过阅读其他关于这里发生的问题的问题了解到，useState 一次又一次地陷入渲染组件的循环中，但我似乎无法弄清楚如何解决它就我而言，答案可能就在那里，但我现在太新了，无法理解它。

Answer 1

您不能直接在功能组件中设置状态。理想情况下应该是这样的：

import {useEffect} from 'react';

function BookedCard({ status, title, dateTime }) {
  const [statusColor, setStatusColor] = useState(color.black);

  useEffect(() => {
    switch (status) {
      case "Pending":
        setStatusColor(color.yellow);
        break;
      case "Rejected":
        setStatusColor(color.red);
        break;
      case "Confirmed":
        setStatusColor(color.green);
        break;
      default:
        break;
    }
  }, [status]);
}

Answer 2

两种解决方法：

使用 useEffect 挂钩。

React.useEffect(() => {
    switch (status) {
        // ...
    }
}, [status])

在调用 setState 之前，例如 setStatusColor(color.yellow)，您需要检查颜色是否已经 yellow。例如：

if (statusColor !== color.yellow) {
  setStatusColor(color.yellow)
}

这些可能会帮助你跳出死循环。

在 React Native 中使用 useState 更改文本颜色

Change text color with useState in React Native

reactjs

react-native

react-hooks

use-state