使用useEffect对axios返回数据做出反应“无法读取未定义的属性'numero'”答案

【问题标题】：react axios returning data with useEffect "Cannot read property 'numero' of undefined"使用useEffect对axios返回数据做出反应“无法读取未定义的属性'numero'”
【发布时间】：2021-01-04 23:36:35
【问题描述】：

我想使用 axios 获取一个模拟 api，但出现错误。

使用 useEffect 获取 api 的变量

     const AnaliseDocumentacao = () => {
           const [solicitacao, setSolicitacao] = useState();
           useEffect(() => {
             axios
               .get('http://localhost:3333/solicitacao')
               .then(res => {
                 console.log('res: ', res);
                 setSolicitacao(res.data)
               })
               .catch(err => {
                 console.error(err);
               })
           }, [])

模拟数据

    {
      "solicitacao": {
        "numero": "9999.999.999999999",
        "linhaCredito": "XXXXX Loren Ipsun ###",
        "valor": "R$999.999,00",
        "prazo": "99 dias",
        "empresa": {
          "cnpj": "00.000.000/0001-00",
          "razaoSocial": "Loren ipsum Ltda"
        },
        "responsavel": {
          "abc": "aaaa",
          "telefone": "(00)0000-0000"
        }
      }
    }

尝试获取字段“numero”，但出现错误：

    console.log('solicitacao: ', solicitacao.numero)

“无法读取未定义的属性‘numero’”

【问题讨论】：

能否提供console.log('res: ', res);的输出?

标签： json reactjs axios use-effect

【解决方案1】：

谢谢大家的回答，经过一些测试我发现useState的变量是错误的。我改变了：

const [solicitacao, setSolicitacao] = useState();

相反，它可以工作：

const [solicitacao, setSolicitacao] = useState([]);

我刚刚在 useState 中包含了“[]”。

【讨论】：

【解决方案2】：

你的 useEffect 回调函数会将 solicitacao 的状态设置为

    {
     "solicitacao": {
         "numero": "9999.999.999999999",
         .....
      }
    }

您需要使用 setSolicitacao(res.data['solicitacao']) 来访问 solicitacao.numero 或使用您当前的代码，尝试访问 solicitacao .solicitacao.numero

【讨论】：

【解决方案3】：

据我所知，您提供的代码没有任何问题。这可能是您在本地设置的 api 的问题。尝试将'localhost:3333' 换成'https://jsonplaceholder.typicode.com/todos/1'。取自here

如果控制台记录了某些内容，那么问题肯定与您的 API 实现有关，而不是您的前端代码。

【讨论】：