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

【问题标题】：Why is variable not printed when we return object from function?当我们从函数返回对象时，为什么不打印变量？
【发布时间】：2020-11-15 03:12:29
【问题描述】：

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

这是我的代码：

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

【问题讨论】：

您正在返回{ state: state }，但您在App 中的解构正在寻找未定义的st 属性。 return state; 在你的钩子中使用类似const tabData = useTabData(); 的东西（你现在可以使用任何名字）。澄清一下：您当前代码的快速修复将是您的自定义挂钩中的return { st: state }。但这显然是个坏主意。只需返回 state 本身。

标签： javascript reactjs react-hooks

【解决方案1】：

给初学者的小提示

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

【讨论】：

【解决方案2】：

您需要通过多种方式编写代码

第一种方式 - 你破坏你的状态

  const { state:st } = useTabData();

第二种方式——直接调用函数

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

您的传递和访问变量名应该相同，或者您可以使用像第一步这样的解构来更改变量名。

【讨论】：