如何在React的componentDidMount中移除Fetch获取的JSON数据中的p标签？

你猜的完全没错——页面上的p标签确实来自API返回的JSON数据本身。要在把数据存入state前清理掉这些标签，你可以在fetch的第二个then方法里对返回的数据做预处理，用正则表达式替换掉<p>和</p>标签就行。

这里给你修改后的componentDidMount代码示例，假设你的返回数据是一个包含quote对象的数组，每个对象里有个带p标签的字段（比如叫content）：

componentDidMount() {
  fetch(API)
    .then(response => response.json())
    .then(rawData => {
      // 遍历原始数据，清理每个quote里的p标签
      const cleanedQuotes = rawData.map(quote => {
        return {
          // 保留原对象的其他属性
          ...quote,
          // 替换掉content字段里的<p>和</p>标签
          content: quote.content.replace(/<\/?p>/g, '')
        };
      });
      // 把处理后的数据存入state
      this.setState({ quotes: cleanedQuotes });
    })
    .catch(err => console.error('数据请求失败:', err));
}

一些补充说明： #

• 如果你的rawData是单个对象而不是数组，直接处理对应的字段就行：

  const cleanedQuote = {
    ...rawData,
    content: rawData.content.replace(/<\/?p>/g, '')
  };
  this.setState({ quotes: cleanedQuote });
  

• 要是你想移除所有HTML标签而不只是p标签，可以用更通用的正则：

  content: quote.content.replace(/<[^>]+>/g, '')
  

• 记得根据你实际的JSON结构调整字段名（比如可能是text而不是content），别直接照搬示例里的字段~

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