React Native中调用setDirections后state未更新问题求助

我首次开发React Native应用，制作了用于展示目的地路线的JourneyScreen组件。当前处于组件测试阶段，API请求结果已被模拟且符合预期，暂无需担心axios请求问题。

我的问题是：调用setDirections后，directions状态似乎并未更新。在useEffect中打印result能得到预期的API响应，但打印directions仍为空对象。我已添加监听directions的useEffect，结果依旧如此。

代码如下：

import React, { useEffect, useState } from 'react';
import { Button, Text, View, TouchableOpacity } from 'react-native';
import axios from 'axios';
import Leg from './leg';

export default function JourneyScreen({
  navigation,
  startLocation,
  endLocation,
}) {
  const [directions, setDirections] = useState({});

  useEffect(() => {
    console.log('Directions: ', directions);
  }, [directions]);

  useEffect(() => {
    const getDirections = async (startLocation, endLocation) => {
      const result = await axios.get('https://localhost:3000');
      console.log('result: ', result);
      setDirections(result);
    };

    getDirections(startLocation, endLocation);
  }, [startLocation, endLocation]);

  return (
    <>
      <Text>{`Directions: ${directions}`}</Text>
      <Text>Directions</Text>
      <Leg />
    </>
  );
}

原因分析与解决方案 #

• 核心问题：axios响应对象的结构
  axios发起get请求后，返回的result是一个完整的响应包装对象，包含data、status、headers等属性，你需要的接口实际数据存放在result.data中。直接把整个result赋值给directions，会导致状态存储的是axios的响应对象而非预期的路线数据，这会让你误以为状态没更新。

• 修复步骤

  1. 修改setDirections的参数，改为result.data，确保存储的是接口返回的实际数据：

     setDirections(result.data);
     

  2. 调试时打印result.data而非整个result，确认数据结构符合预期：

     console.log('result data: ', result.data);
     

  3. 页面中打印对象时，使用JSON.stringify(directions)替代直接拼接，否则会显示[object Object]无法查看具体内容：

     <Text>{`Directions: ${JSON.stringify(directions)}`}</Text>
     

修改后的完整代码：

import React, { useEffect, useState } from 'react';
import { Button, Text, View, TouchableOpacity } from 'react-native';
import axios from 'axios';
import Leg from './leg';

export default function JourneyScreen({
  navigation,
  startLocation,
  endLocation,
}) {
  const [directions, setDirections] = useState({});

  useEffect(() => {
    console.log('Directions: ', directions);
  }, [directions]);

  useEffect(() => {
    const getDirections = async (startLocation, endLocation) => {
      const result = await axios.get('https://localhost:3000');
      console.log('result data: ', result.data);
      setDirections(result.data);
    };

    getDirections(startLocation, endLocation);
  }, [startLocation, endLocation]);

  return (
    <>
      <Text>{`Directions: ${JSON.stringify(directions)}`}</Text>
      <Text>Directions</Text>
      <Leg />
    </>
  );
}

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