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

Question

我想使用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": "(00)0000-0000"
        }
      }
    }

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

const [solicitacao, setSolicitacao] = useState();

为此，它起作用：

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

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