React中根据余额率正负值设置文本颜色的问题求助

你的问题出在单一状态控制所有元素颜色：你用了一个全局的isNegative状态，遍历用户数组时，每次setIsNegative都会更新这个状态，最终状态会被最后一个用户的balanceRate判断结果覆盖，导致所有列表项都使用同一个颜色。

修正方案 #

不需要使用useState和useEffect，直接在渲染每个列表项时，根据当前项的balanceRate值判断颜色即可，这样每个元素能独立控制自身样式：

import React from "react";
import { users } from "../../public/data/data";

const TopCollections = () => {
  return (
    <section>
      <div className="container max-w-[1216px] mx-auto px-4">
        <div>
          <h3>Top collections over</h3>
          <p>Last 7 days</p>
          <ul>
            {users.map((item, index) => {
              return (
                <li key={index}>
                  <span>{index + 1}</span>
                  <img src={item.avatar} alt={item.username} />
                  <div>
                    <p>{item.username}</p>
                    <p>{item.balance}</p>
                  </div>
                  <span
                    className={`${
                      item.balanceRate < 0 ? "text-[#FF002E]" : "text-[#14C8B0]"
                    }`}
                  >
                    {item.balanceRate}%
                  </span>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </section>
  );
};

export default TopCollections;

说明 #

• 每个列表项的颜色仅依赖自身的balanceRate属性，无需额外状态存储，避免了状态更新带来的覆盖问题
• 移除了不必要的useEffect和useState，代码更简洁，渲染逻辑更清晰

内容的提问来源于stack exchange，提问作者anon