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

问题描述

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

1. 与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);
               })
           },[])

1. 模拟数据

    {
      "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": "[phone]"
        }
      }
    }

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

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

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

解决方法

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

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

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

,

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

如果将某些内容记录到控制台，则肯定是您的API实现而不是您的前端代码问题。

,

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

const [solicitacao,setSolicitacao] = useState();

为此，它起作用：

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

我只是在useState处包含了[[]“。