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

如何解决在 React Native 中使用 useState 更改文本颜色

我有一个 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>

显示错误：

重新渲染太多。 React 限制渲染次数以防止无限循环。

现在，通过阅读有关这里发生的事情的其他问题，我明白了 useState 陷入了一次又一次渲染组件的循环中，但我似乎无法弄清楚如何在我的情况可能是答案就在那里，但我现在太新，无法理解。

解决方法

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

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]);
}

,

解决方法有两种：

1. 使用 useEffect 钩子。

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

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

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

这些可以帮助你摆脱无限循环。