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

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);