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

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

您需要通过以下几种方式对代码进行

第一种方式-您破坏状态

const { state:st } = useTabData();

第二路直接调用函数

{JSON.stringify(useTabData().state, null, 2)}

您的传递和访问变量名应该相同，或者您可以使用类似第一步的析构函数来更改变量名。

Answer 2

初学者的小提示

// Return object
const myFunct1 = () => {
// Return values
const alpha = 1;
const beta = 2;
const gamma = 3;

return { alpha, beta, gamma };
}
// Return array
const myFunct2 = () => {
// Return values
const alpha = 111;
const beta = 222;
const gamma = 333;

return [alpha, beta, gamma];
}
// Get values from object return
let { alpha, beta, gamma } = myFunct1();
console.log(alpha, beta, gamma);
// Get values from array return
const [one, two, three] = myFunct2();
console.log(one, two, three);