ReactNative设置state后FlatList不显示接口返回数据问题求助

你遇到的列表无法渲染问题主要由两处代码错误导致：

• state初始值类型不符合要求
  你之前正常运行的本地静态数据是数组类型，当前代码中todos的初始值被设置为{}空对象，而React Native的FlatList组件要求data属性必须传入数组才能遍历生成列表项，首次渲染时拿到空对象自然不会展示任何内容。
• 请求成功后错误序列化数据
  axios请求返回的response.data已经是经过自动解析的数组对象，你额外调用了JSON.stringify()将其转换为JSON字符串，字符串类型同样不符合FlatList的入参要求，因此就算接口请求完成也无法正常渲染列表。

1. 修改state初始值为数组：

const [todos, setTodos] = useState([]);

2. 修改请求成功后的赋值逻辑，删除多余的序列化操作：

React.useEffect(() => {
  axios.get('http://localhost:8000/app/todo-data/').then((response) => {
    setTodos(response.data);
  });
}, []);

如果需要优化首次加载体验，可以在列表区域加加载状态判断，当todos.length === 0时展示加载提示即可。

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