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

Posted 2023-02-19

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

【英文标题】：How do I make a function execute on a single item within a mapped array instead of every item in the array?

【发布时间】：2021-09-28 01:41:07

【问题描述】：

我目前正在处理一个 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();
  ;

非常感谢您的帮助！

【参考方案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 
 );
;

【讨论】：

你能更详细地解释一下状态变化吗？也非常感谢你这个工作，但现在它确实单独选择一个，但我现在该怎么做才能让它也有多重选择，我可以选择多个？

你有一个item数组，其中一个必须勾选，所以你必须把那个item的id保存在state中，null是这个state的默认值，你也可以使用一个空字符串，这完全取决于你。

啊，好的，谢谢你很好地解释了这个状态。但是，我将如何进行多选？

multiselect - 在状态中保存的不仅仅是一个 id，而是一组 id 并相应地更新它们，然后您的支票将从 visible === person.customer_id 变为 visible.includes(person.customer_id)

好的，谢谢你，很抱歉所有的问题，但现在取消选择不起作用，我该如何再次合并？