React Native Expo应用中使用html-entities解码HTML实体失效求助

先纠正你代码里的几个关键错误，再提供可行的实现方案：

代码里的明显问题 #

1. 组件不能是async函数：React组件必须返回JSX，async函数会返回Promise，直接导致组件渲染异常，后续解码逻辑根本无法正常执行。
2. 初始状态字符串语法错误：你写的title:She" hysterical"未加引号，属于语法错误，应该用双引号包裹成合法字符串，比如title:"She" hysterical""。

可行的实现方案 #

方案1：获取数据时提前解码（推荐） #

在API请求拿到数据后，先完成HTML实体解码再存入状态，避免渲染时重复解码，逻辑更清晰：

import { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { decode } from 'html-entities';

const Discover = () => {
  const [freeMedia, setFreeMedia] = useState([]);

  useEffect(() => {
    const fetchMediaData = async () => {
      // 替换成你的真实API调用
      const apiResponse = await fetch('你的API地址');
      const rawData = await apiResponse.json();
      
      // 遍历数据并解码每个字段
      const decodedData = rawData.map(item => ({
        ...item,
        title: decode(item.title),
        description: decode(item.description)
      }));
      
      setFreeMedia(decodedData);
    };

    fetchMediaData();
  }, []);

  return (
    <View>
      {freeMedia.length > 0 ? (
        freeMedia.map((item, index) => (
          <View key={index} style={{ marginVertical: 8 }}>
            <Text>{item.title}</Text>
            <Text>{item.description}</Text>
          </View>
        ))
      ) : null}
    </View>
  );
};

export default Discover;

方案2：渲染时解码 #

如果需要在渲染阶段解码，确保组件定义正确、字符串格式合法即可：

import { useState } from 'react';
import { View, Text } from 'react-native';
import { decode } from 'html-entities';

const Discover = () => {
  // 初始状态字符串要加引号，保证语法合法
  const [freeMedia, setFreeMedia] = useState([
    { title: "She" hysterical"", description: "test & test" }
  ]);

  return (
    <View>
      {freeMedia.length > 0 ? (
        freeMedia.map((item, index) => (
          <View key={index}>
            <Text>{decode(item.title)}</Text>
            <Text>{decode(item.description)}</Text>
          </View>
        ))
      ) : null}
    </View>
  );
};

export default Discover;

额外排查点 #

• 确认已经正确安装html-entities包：执行npm install html-entities或yarn add html-entities
• 如果API返回的是双重转义的字符串（比如She" hysterical"），需要调用两次decode：decode(decode(item.title))

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