为什么当我们从函数返回对象时不打印变量？

Question

我制作了一个自定义挂钩，用于返回状态。当我从自定义挂钩返回一个对象时，它不会打印状态值，但当我返回一个以状态作为第一个元素的数组时，它会打印一个值。

这是我的代码：

import React from "react";

import axios from "axios";

export default () => {

  const [state, setState] = React.useState([]);

  const fetchData = async () => {

    const res = await axios.get("https://5os4e.csb.app/data.json");

    setState(res.data);

  };

  React.useEffect(() => {

    (async () => {

      await fetchData();

    })();

  }, []);

// i am returning a object

  return { state };

};

像这样使用：

export default function App() {

  const { st } = useTabData();

  return (

    <div className="App">

      <h1>Hello CodeSandbox</h1>

      {JSON.stringify(st, null, 2)}

    </div>

  );

}

为什么st不打印值？当我返回一个数组时它被打印出来。

https://codesandbox.io/s/sweet-meadow-9l41z?file=/src/App.js:89-276

Answer 1

您需要通过几种方式编写代码第一种方式 - 你破坏你的状态&nbsp;&nbsp;const&nbsp;{&nbsp;state:st&nbsp;}&nbsp;=&nbsp;useTabData();第二种方式——直接调用函数{JSON.stringify(useTabData().state,&nbsp;null,&nbsp;2)}您传递和访问的变量名应该相同，或者您可以像第一步一样使用解构来更改变量名。

Answer 2

给初学者的小提示// Return objectconst myFunct1 = () => {&nbsp; // Return values&nbsp; const alpha = 1;&nbsp; const beta = 2;&nbsp; const gamma = 3;&nbsp;&nbsp;&nbsp; return { alpha, beta, gamma };}// Return arrayconst myFunct2 = () => {&nbsp; // Return values&nbsp; const alpha = 111;&nbsp; const beta = 222;&nbsp; const gamma = 333;&nbsp;&nbsp;&nbsp; return [alpha, beta, gamma];}// Get values from object returnlet { alpha, beta, gamma } = myFunct1();console.log(alpha, beta, gamma);// Get values from array returnconst [one, two, three] = myFunct2();console.log(one, two, three);