如何根据ReactJS中元素列表中的布尔值仅显示一次值

您可以使用某种类型的flag来判断是否需要呈现临时标签.

我这样解决它，我添加了一个useRef作为旗帜，并使用这个引用来跟踪我们是否已经呈现了temp label.

import React, { useRef } from "react";

const MyComponent = () => {
  const data = [
    { id: 1, name: "Item 1", temp: false },
    { id: 2, name: "Item 2", temp: false },
    { id: 3, name: "Item 3", temp: true },
    { id: 4, name: "Item 4", temp: true },
    { id: 5, name: "Item 5", temp: true },
    { id: 6, name: "Item 6", temp: false },
    { id: 7, name: "Item 7", temp: false },
    { id: 8, name: "Item 8", temp: false },
  ];

  const flag = useRef(null);

  return (
    <div>
      {data.map((item, idx) => {
        // set flag if the item is a temp item and the flag has not been set yet
        if (item.temp && flag.current === null) flag.current = idx;

        return (
          <div key={item.id}>
            <span>{item.name}</span>
            {flag.current === idx ? <span> temp label displayed </span> : null}
          </div>
        );
      })}
    </div>
  );
};
export default MyComponent;

实时预览a codesandbox