Javascript 如何在对象的值中查找单词并在React中应用条件？

我有一个对象数组，我在上面使用map。但问题是，在地图中，我想从对象值中搜索特定的单词

我有一个像这样的对象数组：

[
      {
         "groupName": "TwoFactTest",
         "groupId": ""
      },
      {
         "groupName": "OU_AHMEDABAD"
         "groupId": ""
      }
]

{
  importedgroups.map((row, index) => {
    return (
      <TableRow key={row.name}>
        <GroupIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} />
        {/* <OUIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} 
            /> */}
        <TableCell>{row.groupName}</TableCell>

        <TableCell
          align="left"
          style={{ font: "normal normal 600 14px Open Sans" }}
        >
          {row.groupImportedAs}
        </TableCell>

        <TableCell>
          <Button
            href="javascript:void(0)"
            color="primary"
            disableRipple
            onClick={() => removeGroup(row, index)}
            style={{ textTransform: "none" }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "flex-end",
                justifyContent: "flex-end",
              }}
            >
              <RemoveCircleOutlineIcon
                style={{
                  marginBottom: "-7px",
                  width: "14px",
                  height: "14px",
                  marginRight: "2px",
                }}
              />{" "}
              Remove
            </div>
          </Button>
        </TableCell>
      </TableRow>
    );
  });
}

我已经编写了如下代码：

[
      {
         "groupName": "TwoFactTest",
         "groupId": ""
      },
      {
         "groupName": "OU_AHMEDABAD"
         "groupId": ""
      }
]

{
  importedgroups.map((row, index) => {
    return (
      <TableRow key={row.name}>
        <GroupIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} />
        {/* <OUIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} 
            /> */}
        <TableCell>{row.groupName}</TableCell>

        <TableCell
          align="left"
          style={{ font: "normal normal 600 14px Open Sans" }}
        >
          {row.groupImportedAs}
        </TableCell>

        <TableCell>
          <Button
            href="javascript:void(0)"
            color="primary"
            disableRipple
            onClick={() => removeGroup(row, index)}
            style={{ textTransform: "none" }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "flex-end",
                justifyContent: "flex-end",
              }}
            >
              <RemoveCircleOutlineIcon
                style={{
                  marginBottom: "-7px",
                  width: "14px",
                  height: "14px",
                  marginRight: "2px",
                }}
              />{" "}
              Remove
            </div>
          </Button>
        </TableCell>
      </TableRow>
    );
  });
}

{
importedgroups.map（（行，索引）=>{
返回(
{/*  */}
{row.groupName}
{row.groupImportedAs}
removeGroup（行，索引）}
样式={{textTransform:“无”}
>
{" "}
去除
);
});
}

我想执行这样的操作：当对象值中包含

OU

的一个字时，将

放入else

。我已经注释掉了

OUIcon

---

有办法吗？。如何在React中执行此操作？

您可以使用条件渲染来渲染组件

请尝试以下操作：-

{importedgroups.map((row, index) => {
        return (
          <TableRow key={row.name}>
            {row.groupName.includes('OU') ? (
              <OUIcon
                style={{
                  marginRight: '5px',
                  display: 'inline-flex',
                  verticalAlign: 'bottom'
                }}
              />
            ) : (
              <GroupIcon
                style={{
                  marginRight: '5px',
                  display: 'inline-flex',
                  verticalAlign: 'bottom'
                }}
              />
            )}

            <TableCell>{row.groupName}</TableCell>

            <TableCell
              align="left"
              style={{ font: 'normal normal 600 14px Open Sans' }}
            >
              {row.groupImportedAs}
            </TableCell>

            <TableCell>
              <Button
                href="javascript:void(0)"
                color="primary"
                disableRipple
                onClick={() => removeGroup(row, index)}
                style={{ textTransform: 'none' }}
              >
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'flex-end',
                    justifyContent: 'flex-end'
                  }}
                >
                  <RemoveCircleOutlineIcon
                    style={{
                      marginBottom: '-7px',
                      width: '14px',
                      height: '14px',
                      marginRight: '2px'
                    }}
                  />{' '}
                  Remove
                </div>
              </Button>
            </TableCell>
          </TableRow>
        );
      })}

{importedgroups.map（（行，索引）=>{
返回(
{row.groupName.includes（'OU'）(
) : (
)}
{row.groupName}
{row.groupImportedAs}
removeGroup（行，索引）}
样式={{textTransform:'none'}
>
{' '}
去除
);
})}

---

注意：-如果

groupName

在字符串中的任何位置包含

OU

，这将呈现

OUIcon

。如果您确定您的数据将包含所有有效名称的

OU\ucode>，则需要更新条件。
您可以使用条件渲染来渲染组件

    return (
      <TableRow key={row.name}>
        {
           row.groupName.startsWith('OU') ? 
           <OUIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} /> : 
<GroupIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} />
         }
        <TableCell>{row.groupName}</TableCell>

        <TableCell

请尝试以下操作：-

{importedgroups.map((row, index) => {
        return (
          <TableRow key={row.name}>
            {row.groupName.includes('OU') ? (
              <OUIcon
                style={{
                  marginRight: '5px',
                  display: 'inline-flex',
                  verticalAlign: 'bottom'
                }}
              />
            ) : (
              <GroupIcon
                style={{
                  marginRight: '5px',
                  display: 'inline-flex',
                  verticalAlign: 'bottom'
                }}
              />
            )}

            <TableCell>{row.groupName}</TableCell>

            <TableCell
              align="left"
              style={{ font: 'normal normal 600 14px Open Sans' }}
            >
              {row.groupImportedAs}
            </TableCell>

            <TableCell>
              <Button
                href="javascript:void(0)"
                color="primary"
                disableRipple
                onClick={() => removeGroup(row, index)}
                style={{ textTransform: 'none' }}
              >
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'flex-end',
                    justifyContent: 'flex-end'
                  }}
                >
                  <RemoveCircleOutlineIcon
                    style={{
                      marginBottom: '-7px',
                      width: '14px',
                      height: '14px',
                      marginRight: '2px'
                    }}
                  />{' '}
                  Remove
                </div>
              </Button>
            </TableCell>
          </TableRow>
        );
      })}

{importedgroups.map（（行，索引）=>{
返回(
{row.groupName.includes（'OU'）(
) : (
)}
{row.groupName}
{row.groupImportedAs}
removeGroup（行，索引）}
样式={{textTransform:'none'}
>
{' '}
去除
);
})}

注意：-如果
groupName
在字符串中的任何位置包含
OU
，这将呈现
OUIcon
。如果您确定数据将包含所有有效名称的
OU\ucode>，则需要更新条件。
返回(
    return (
      <TableRow key={row.name}>
        {
           row.groupName.startsWith('OU') ? 
           <OUIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} /> : 
<GroupIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} />
         }
        <TableCell>{row.groupName}</TableCell>

        <TableCell

{
row.groupName.startsWith（'OU'）？
: 
}
{row.groupName}
返回(
{
row.groupName.startsWith（'OU'）？
: 
}
{row.groupName}
使用条件呈现，文档：

例如：


{
  importedgroups.map((row, index) => {
    let icon;
    if (/OU_/.test(row.groupName)) {
      icon = (<OUIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} />);
    } else {
      icon = (<GroupIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} />);
    }

    return (
      <TableRow key={row.name}>
        {icon}
        <TableCell>{row.groupName}</TableCell>
    ...


{
importedgroups.map（（行，索引）=>{
让图标；
if（/OU\uu/.test（row.groupName））{
图标=（）；
}否则{
图标=（）；
}
返回(
{icon}
{row.groupName}
...
使用条件呈现，文档：

例如：


{
  importedgroups.map((row, index) => {
    let icon;
    if (/OU_/.test(row.groupName)) {
      icon = (<OUIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} />);
    } else {
      icon = (<GroupIcon style={{ marginRight: '5px', display: 'inline-flex', verticalAlign: 'bottom' }} />);
    }

    return (
      <TableRow key={row.name}>
        {icon}
        <TableCell>{row.groupName}</TableCell>
    ...


{
importedgroups.map（（行，索引）=>{
让图标；
if（/OU\uu/.test（row.groupName））{
图标=（）；
}否则{
图标=（）；
}
返回(
{icon}
{row.groupName}
...
它向我抛出了一个错误：
类型错误：row.groupName.contains不是一个函数
。请修复这个问题？@progpro我的坏，我已经更新了条件。基本上字符串有include方法来检查包含的字符串。它向我抛出了这个错误：
类型错误：row.groupName.contains不是函数
。请修复这个问题？@progpro我的坏，我有更新的条件。基本上字符串有include方法来检查包含的字符串。