来自 Axios 的数据结果

Question

我是 Axio 和 React 的新手，我想知道如何从 Axio 返回我的结果。 我的 console.log 完美地显示了 PHP 发送的所有数组，但它不会在我的 HTML 代码中返回。

这是我的代码

axios.get('api.php').then(result => {
    console.log(result.data);
    return result.data
});

我尝试使用innerHTML，但它给了我

[object Object]

在result.data 之后添加.macdb 会给我一个undefined

Answer 1

大概您正试图以某种有意义的方式显示返回的数据。在反应中，这是通过从状态和/或道具渲染一些 JSX 来完成的。对于异步数据获取，您需要在收到响应后更新您的状态，而不是返回它（包装在一个 Promise 中）。

axios.get('api.php')
  .then(result => {
    console.log(result.data);
    this.setState({ data: result.data });
  });

获取数据的典型模式是在 componentDidMount 生命周期函数中（对于基于类的组件）或带有空依赖数组的 useEffect 钩子（对于函数式组件）。

class Demo extends Component {
  state = {
    data: {},
  };

  componentDidMount() {
    axios.get('api.php')
      .then(result => {
        console.log(result.data);
        this.setState({ data: result.data });
      });
  }
}

或

const Demo = () => {
  const [data, setData] = useState({});
  useEffect(() => {
    axios.get('api.php')
      .then(result => {
        console.log(result.data);
        setData(result.data);
      });
  }, []);
};