React.js中如何从JSON文件获取数据并渲染所有标题？

看起来你遇到了两个核心问题：一是无法正确渲染JSON里的所有标题，二是收到了关于匿名函数的提示。咱们一步步来解决：

1. 核心错误：数组与单个对象的混淆 #

你的data.json返回的是对象数组，但你的代码里尝试访问findresponse.title——这是错误的，因为数组本身没有title属性，只有数组里的每个对象才有。所以你需要把整个数组存入state，而不是取不存在的title属性。

2. 修正后的代码实现 #

第一步：修正componentDidMount的数据获取逻辑 #

componentDidMount() {
  fetch('./data/data.json')
    .then(response => response.json())
    // 这里直接把整个数组存入state
    .then(data => {
      console.log('Loaded data:', data); // 现在你会看到完整的对象数组
      this.setState({ data });
    })
    // 别忘了添加错误处理，避免请求失败时没有反馈
    .catch(err => console.error('Failed to load data:', err));
}

第二步：初始化state避免渲染错误 #

在组件的构造函数里初始化data为空数组，防止初始渲染时因为this.state.data是undefined而报错：

constructor(props) {
  super(props);
  this.state = {
    data: []
  };
}

第三步：遍历数组渲染所有标题 #

你之前的渲染代码只尝试渲染单个title，需要用map遍历数组生成每个列表项，同时要给每个列表项加唯一的key（用对象的id最合适）：

render() {
  return (
    <ul>
      {/* 使用可选链操作符?.，避免data还没加载完成时调用map报错 */}
      {this.state.data?.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

3. 关于匿名函数的提示 #

这个提示通常来自ESLint之类的代码检查工具，属于代码风格问题，不是语法错误，不会影响功能。如果想消除提示，有两种方式：

• 给函数命名（注意要绑定this，或者继续用箭头函数）：

  fetch('./data/data.json')
    .then(function parseResponse(response) {
      return response.json();
    })
    .then(function handleFetchedData(data) {
      this.setState({ data });
    }.bind(this))
  

• 调整ESLint规则：在项目的ESLint配置文件里禁用func-names规则。

一般来说，箭头函数的写法更简洁，在React组件里也更常用，所以如果没有强制的代码风格要求，完全可以忽略这个提示。

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