React+Redux Toolkit表格条件样式渲染：未验证成员列灰显

我用Redux Toolkit从API拉取数据填充表格，想实现当成员的emailVerified值为false时，将该成员对应的表格行灰显。已精简代码以复现问题。

API返回数据示例 #

{
  "id": 5,
  "members": [
    {
      "id": 24,
      "email": "olaoluwaajiboye2@gmail.com",
      "firstName": "Olaoluwa",
      "lastName": "Ajiboye",
      "emailVerified": true,
      "role": "Operations"
    },
    {
      "id": 27,
      "email": "damidami@gmail.com",
      "firstName": "Admin",
      "lastName": "Admin",
      "role": "Operations"
    }
  ]
}

Members.jsx #

import { useEffect } from "react"
import { useDispatch, useSelector } from "react-redux";
import { getInvitees } from "#features/organization/inviteSlice";

const Members = () => {

 const dispatch = useDispatch();

 const { invitees } = useSelector((state) => state.invite)

 useEffect(() => {
    dispatch(getInvitees());
  }, []);

return ( 
 <div>
   {invitees && invitees?.map((invitee) =>
     invitee?.members?.map((member) => {
      return (
       <TeamsTable
         key={member.id}
         name={`${member.firstName} ${member.lastName}`}
         email={member.email}
         date={moment(member.dateJoined).format("LL")}
         role={member.role}
         ...
         />
       );
     })
   )}
 </div>
)
}

原TeamsTable.jsx #

import React from "react";
import { Flex, Td, Text, Tr } from "@chakra-ui/react";
import { useSelector } from "react-redux";

export default function TeamsTable(props) {
const { name, email, role, actions, date } = props;
  return (
    <Tr>
      <Td w="250px">
        <Text fontSize={{ sm: "xs", md: "15px" }} color={textColor}>
            {name}
        </Text>
      </Td>
      <Td fontSize={{ sm: "xs", md: "15px" }}>
          {email}
      </Td>
      <Td>
        <Text fontSize={{ sm: "xs", md: "15px" }} color={textColor} pb=".5rem">
            {role}
        </Text>
      </Td>
      ....
    </Tr>
  );
}

尝试过的错误写法 #

const { invitees } = useSelector((state) => state.invite);

const members = invitees[0].members;

const emailVerified = members.map((member) => member.emailVerified);

return (
 <Tr>
   <Td style={{ backgroundColor: member.emailVerified ? 'white' : 'gray' }}>
    <Text>
       {name}
    </Text>
   </Td>
      ...
 </Tr>
);

正确实现方案 #

问题核心是没有把当前行成员的emailVerified状态传递给TeamsTable，反而在子组件中去Redux取整个列表数据，无法对应到当前行。按以下步骤修改：

1. 在Members组件中传递emailVerified属性
   渲染TeamsTable时，把当前成员的emailVerified作为props传入：

<TeamsTable
  key={member.id}
  name={`${member.firstName} ${member.lastName}`}
  email={member.email}
  date={moment(member.dateJoined).format("LL")}
  role={member.role}
  emailVerified={member.emailVerified} // 新增该行，传递当前成员的验证状态
  ...
/>

2. 在TeamsTable中使用属性设置样式
   直接从props接收emailVerified，给整行或单元格设置背景色。推荐给Tr设置样式实现整行灰显：

import React from "react";
import { Flex, Td, Text, Tr } from "@chakra-ui/react";

export default function TeamsTable(props) {
const { name, email, role, actions, date, emailVerified } = props;
// 根据验证状态决定背景色，用Chakra内置颜色更统一
const rowBgColor = emailVerified ? 'white' : 'gray.100';

  return (
    <Tr backgroundColor={rowBgColor}>
      <Td w="250px">
        <Text fontSize={{ sm: "xs", md: "15px" }}>
            {name}
        </Text>
      </Td>
      <Td fontSize={{ sm: "xs", md: "15px" }}>
          {email}
      </Td>
      <Td>
        <Text fontSize={{ sm: "xs", md: "15px" }} pb=".5rem">
            {role}
        </Text>
      </Td>
      ....
    </Tr>
  );
}

错误写法的问题点 #

• 在子组件中获取整个members列表并map，得到的是所有成员的验证状态数组，无法对应到当前渲染的那一行。
• 子组件无需重复从Redux取数，通过props接收当前行的状态才符合React数据流原则。

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