使用Axios与React Native无法完整获取JSON接口数据的问题

嘿，我看到你在用React Native和Axios获取JSON数据时碰到了问题——没法拿到cursos数组里的所有值对吧？这其实是因为你没注意到接口返回的cursos是数组类型，不是单个对象，直接访问response.data.cursos.name肯定拿不到正确结果的，咱们来一步步解决它。

先理清接口返回的JSON结构 #

你的接口返回的数据是这样的：

{
  "categoria": "Graduação - Semipresenciais",
  "cursos": [
    { "name": "Engenharia de Computação", "tarefas": "1" },
    { "name": "Engenharia de Computação", "tarefas": "2" },
    { "name": "Psicologia", "tarefas": "4" }
  ]
}

这里的cursos是一个包含3个课程对象的数组，数组本身没有name属性，只有数组里的每一个子对象才有name和tarefas属性，所以你得先遍历这个数组才能拿到每个课程的数据。

修改你的buscaCursosJson函数 #

下面是调整后的代码，能完整获取并处理所有数据：

buscaCursosJson = () => {
  axios.get("https://api.myjson.com/bins/1f1pxv")
    .then(response => {
      // 先把整个响应数据存下来，方便后续使用
      const dadosCursos = response.data;

      // 先获取分类信息
      console.log("Categoria:", dadosCursos.categoria);

      // 遍历cursos数组，逐个获取每个课程的信息
      dadosCursos.cursos.forEach((curso, indice) => {
        console.log(`课程 ${indice + 1}: 名称 - ${curso.name}, 任务数 - ${curso.tarefas}`);
        // 如果想用alert展示所有内容，可以先拼接成字符串再弹出
        // 比如：let mensagem = ''; dadosCursos.cursos.forEach(curso => mensagem += `${curso.name} - ${curso.tarefas}\n`); alert(mensagem);
      });

      // 如果你需要把数据存到组件state里，方便后续在界面渲染
      this.setState({
        categoria: dadosCursos.categoria,
        listaCursos: dadosCursos.cursos
      });
    })
    .catch(erro => {
      // 别忘了处理请求失败的情况，避免程序崩溃
      console.error("获取课程数据出错:", erro);
      alert("加载课程数据时出现错误！");
    });
};

额外提示：在界面上渲染数据 #

如果要把这些数据展示到React Native的界面上，可以在render方法里用map遍历state里的数组：

render() {
  const { categoria, listaCursos } = this.state;
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18, fontWeight: "bold" }}>
        分类：{categoria}
      </Text>
      {listaCursos.map((curso, indice) => (
        <View key={indice} style={{ marginTop: 10 }}>
          <Text>课程名称：{curso.name}</Text>
          <Text>任务数量：{curso.tarefas}</Text>
        </View>
      ))}
    </View>
  );
}

这样就能完整获取并展示接口返回的所有数据啦！

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