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

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>
    ));

现在，我想这样当我按下一个头像时，会出现一个复选标记，表明我选择了那个头像。我正在尝试这样做，以便当我选择头像时，复选标记会显示在个人头像上。

这是我的 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 
 });
};