React Native列表渲染：如何向行渲染函数传递JSON参数？

嘿，看你贴的代码片段，我猜你大概率是踩了React数据管理和组件渲染时机的坑！我帮你拆解几个最常见的问题，你对照着排查下：

1. 别用全局变量存接口数据！ #

你在componentDidMount里把返回的responseJson赋值给了全局的dataJson，这可是React里的大忌！React组件是靠state来驱动渲染的，全局变量的变化React根本感知不到，就算接口数据回来了，组件也不会重新渲染，renderRows自然拿不到新数据。

改法很简单：把数据存进组件state #

componentDidMount() {
  fetch('http://link/json.php', { method: 'GET' })
    .then((response) => response.json())
    .then((responseJson) => {
      // 把接口数据存到state里，同时更新加载状态
      this.setState({ 
        preLoad: true,
        listData: responseJson // 新增个字段存JSON数据
      });
    })
    .catch((error) => {
      console.error('接口请求炸了：', error); // 别忽略错误，控制台看一眼就知道问题
    });
}

2. 调用renderRows的姿势不对 #

假设你是在render()里渲染列表，常见错误要么是没传参数，要么是数据还没加载完就急着调用renderRows，直接报空指针。

正确的调用姿势：先判断数据，再循环渲染 #

render() {
  const { preLoad, listData } = this.state;
  
  // 数据还没加载好？先显示个加载提示
  if (!preLoad || !listData) {
    return <div>加载中...</div>;
  }

  // 遍历listData，把每一项传给renderRows
  return (
    <div className="list-container">
      {listData.map((item, index) => (
        // 一定要给列表项加唯一key，React要求的，不然会有警告
        <div key={index}>{this.renderRows(item)}</div>
      ))}
    </div>
  );
}

// 确保renderRows能正确接收item参数，返回JSX
renderRows(item) {
  // 这里根据你的JSON字段来渲染，比如假设你的数据有name和content字段
  return (
    <div className="list-item">
      <h3>{item.name}</h3>
      <p>{item.content}</p>
    </div>
  );
}

3. 还有个小细节：this绑定问题 #

如果你的renderRows是类组件里的普通方法，记得绑定this，不然在函数里用this会报错。两种解决办法：

• 构造函数里绑定：

constructor(props) {
  super(props);
  this.state = { preLoad: false, listData: [] };
  this.renderRows = this.renderRows.bind(this);
}

• 或者直接用箭头函数定义方法：

// 箭头函数会自动绑定组件的this
renderRows = (item) => {
  // ...你的渲染逻辑
}

另外，别忘了检查接口返回的responseJson是不是数组！如果是对象的话，map方法会直接报错，得先把它转成数组再遍历。

你先对照这几点改改，应该就能解决问题啦！

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