如何使函数在映射数组中的单个项目而不是数组中的每个项目上执行？

Question

我目前正在做一个 React 项目，但很难让函数处理映射数组中的单个项目。

我在另一个文件中有一个对象数组，如下所示：

export const CUSTOMERS = [
  {
    customer_id: '1',
    name: "John Doe",
    profile_picture: "https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg?size=626&ext=jpg",
    approval_status: false,
    payment_method: Enums.OrderPaymentMethod.IN_PERSON
  },
  {
    customer_id: '2',
    name: "Evan Green",
    profile_picture: "https://media.istockphoto.com/photos/portrait-concept-picture-id1016761216?k=6&m=1016761216&s=612x612&w=0&h=j-DyZTSqmnhoHKsJdGmiMPnungpHiq9UTrvx4UylMQI=",
    approval_status: false,
    payment_method: Enums.OrderPaymentMethod.IN_PERSON
  },
  {
    customer_id: '3',
    name: "Grace Lewis",
    profile_picture: "https://img.freepik.com/free-photo/friendly-brunette-looking-camera_23-2147774849.jpg?size=626&ext=jpg",
    approval_status: false,
    payment_method: Enums.OrderPaymentMethod.IN_PERSON
  }, ...]

目前，我把它们映射成这样：

 const displayContacts = () =>
    CUSTOMERS.map((person) => (
      <AvatarContainer onPress={onClickAvatar}>
        <Avatar
          picture={{uri: person.profile_picture}}
          onPress={() => showIcon(person.customer_id)}
        />
        <TextAvatar>{person.name}</TextAvatar>
        {visible && <CheckIcon />}
      </AvatarContainer>
    ));

现在，我想做的是当我按下一个头像时，会出现一个复选标记，表明我 select 编辑了那个头像。我试图做到这一点，以便当我 select 头像时，复选标记显示在个人头像上。

这是我的 showIcon 函数，它在单击时显示和删除复选标记：

const [visible, setVisible] = useState(false);

  const showIcon = () => {
    // eslint-disable-next-line @typescript-eslint/no-shadow
    setVisible((visible) => !visible);
    onClickAvatar();
  };

非常感谢您的帮助！

Answer 1

所以基本上你必须设置在你的状态下必须“检查”哪个头像。

const displayContacts = () =>
CUSTOMERS.map((person) => (
  <AvatarContainer onPress={onClickAvatar}>
    <Avatar
      picture={{uri: person.profile_picture}}
      onPress={() => showIcon(person.customer_id)}
    />
    <TextAvatar>{person.name}</TextAvatar>
    {visible === person.customer_id && <CheckIcon />}
  </AvatarContainer>
));

下面是您的 showIcon 的外观：

const [visible, setVisible] = useState(null);
const showIcon = (id) => { setVisible(id); };

如果你想换个地方：

const showIcon = (id) => { 
 setVisible((prev) => {
    return prev === id ? '' : id 
 });
};

如何使函数在映射数组中的单个项目而不是数组中的每个项目上执行？

How do I make a function execute on a single item within a mapped array instead of every item in the array?

javascript

typescript

reactjs

react-native

storybook