React应用从Public文件夹读取JSON文件遇TypeError问题求助

首先，咱们来拆解你遇到的问题：你看到的TypeError: this.state is null大概率是误导性的错误提示，真正的根源是JSON数据结构和代码期望不匹配，加上异步加载后的处理逻辑问题。

1. 核心问题：数据结构与代码预期不符 #

你的data.json里，entry是一个对象（包含键为"1"、"2"的数组），但代码把整个JSON响应赋值给this.state.entry后，试图对这个对象调用map方法——而对象本身没有map方法，这才是报错的真实原因。

2. 分步解决方案 #

第一步：修正数据处理逻辑

在componentDidMount中，需要把JSON里entry对象中的所有数组合并成一个单一数组，这样才能用map遍历：

componentDidMount(){
  fetch(process.env.PUBLIC_URL + `/js/data.json`) // 去掉路径前的点，PUBLIC_URL已指向public根目录
    .then(res => res.json())
    .then(data => {
      // 提取entry对象下的所有数组，合并成一个数组
      const allEntries = Object.values(data.entry).flat();
      this.setState({ entry: allEntries });
    })
    .catch(err => console.error('加载数据失败:', err)); // 增加错误捕获，方便排查问题
}

第二步：确保初始渲染的安全性

虽然你在constructor里初始化了entry为数组，但为了避免异步加载过程中或加载失败时的潜在报错，可以在render里添加安全检查：

{Array.isArray(this.state.entry) && this.state.entry.map(x => (
  // 你的列表项代码
))}

或者使用可选链操作符（需React支持ES2020+）：

{this.state.entry?.map(x => (
  // 你的列表项代码
))}

第三步：修正列表项的key属性

你现在把key加在了img元素上，不符合React的要求——key必须加在被map返回的最外层元素（也就是li）上：

<li key={`${x.date}-${x.ctx}`}> {/* 用唯一组合值作为key，如果有id字段更合适 */}
  <div className='centering'>
    <span>
      <img alt='' src={process.env.PUBLIC_URL + `/img/${x.img}.jpg`}/> {/* 同样去掉路径前的点 */}
    </span>
    <span className='txt'> { x.date } </span>
    <span>
      <p>{ x.ctx }</p>
    </span>
  </div>
  <div className='hr-line'></div>
</li>

第四步：检查资源路径

确保data.json和图片的路径正确：

• process.env.PUBLIC_URL指向React项目的public目录根，所以路径应该是/js/data.json而非./js/data.json
• 图片路径同理：/img/${x.img}.jpg

3. 额外提示 #

如果你的JSON结构是有意设计成按数字键分类的，也可以保留原结构，遍历对象的键来渲染分组列表，比如：

{Object.entries(this.state.entry).map(([key, items]) => (
  <div key={key}>
    <h3>分组 {key}</h3>
    <ul>
      {items.map(x => (
        <li key={`${key}-${x.date}`}>
          {/* 列表项内容 */}
        </li>
      ))}
    </ul>
  </div>
))}

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