使用Map函数渲染图片元标签关键词时仅显示首字母的问题

• 用Map函数渲染图片元标签关键词时，仅显示第一个关键词的首字母，其余关键词无内容
• console.log可正常输出所有关键词，手动通过UI添加的关键词能正常显示

相关代码 #

状态定义 #

const [listOfSelectedTagsFromTheMenu, setListOfSelectedTagsFromTheMenu] = useState(new Set([]));

获取关键词的异步函数 #

const fetchImageKeywords = async () => {
    setListOfSelectedTagsFromTheMenu(new Set());
    let keywords = await getImageKeywords(imageUri);
    keywords.forEach((keyword) => {
      listOfSelectedTagsFromTheMenu.add(keyword);
      setListOfSelectedTagsFromTheMenu(new Set(listOfSelectedTagsFromTheMenu));
    });
};

关键词渲染代码 #

<Layout style={{ display: "flex", flexWrap: "wrap" }}>
  {[...listOfSelectedTagsFromTheMenu].map((keyword, index) => (
    <Card key={index} style={{ width: 100, height: 50 }}>
      <Layout style={{ flexDirection: "row" }} level="1">
        <Text>{keyword}</Text>
        <Icon
          onPress={() => {
            listOfSelectedTagsFromTheMenu.delete(keyword);
            setListOfSelectedTagsFromTheMenu(
              new Set(listOfSelectedTagsFromTheMenu)
            );
          }}
          style={{ height: 23, width: 23 }}
          fill="red"
          name="close-outline"
        />
      </Layout>
    </Card>
  ))}
</Layout>

问题原因 #

核心问题在fetchImageKeywords的状态更新逻辑：

• React状态更新是异步的，forEach循环中每次调用setListOfSelectedTagsFromTheMenu时，闭包捕获的listOfSelectedTagsFromTheMenu仍是初始的空Set
• 循环内每次都是往空Set里添加单个关键词后设置状态，最终状态只会保留最后一次添加的关键词
• 若getImageKeywords返回的是单个字符串（而非数组），会被拆分为单个字符遍历，导致渲染时只显示单个字母

解决方法 #

1. 一次性更新状态，避免循环调用setState #

修改fetchImageKeywords，直接将所有关键词转为Set后一次性设置状态：

const fetchImageKeywords = async () => {
    const keywords = await getImageKeywords(imageUri);
    // 直接用关键词数组创建新Set，一次性更新状态
    setListOfSelectedTagsFromTheMenu(new Set(keywords));
};

2. 删除关键词时使用函数式更新，确保基于最新状态 #

修改删除逻辑，用函数式更新获取最新的状态Set，避免闭包问题：

<Icon
  onPress={() => {
    setListOfSelectedTagsFromTheMenu(prevSet => {
      const newSet = new Set(prevSet);
      newSet.delete(keyword);
      return newSet;
    });
  }}
  style={{ height: 23, width: 23 }}
  fill="red"
  name="close-outline"
/>

3. 可选：避免用index作为key（优化） #

如果关键词可能重复或顺序变化，建议用关键词本身作为key（需确保关键词唯一）：

{[...listOfSelectedTagsFromTheMenu].map((keyword) => (
  <Card key={keyword} style={{ width: 100, height: 50 }}>
    {/* 其余代码不变 */}
  </Card>
))}

内容的提问来源于stack exchange，提问作者Broump