时间戳

首页 > 解决方案 > 当我们从函数返回对象时，为什么不打印变量？

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

问题描述

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

这是我的代码：

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

标签： javascriptreactjsreact-hooks

解决方案

您需要以几种方式编写代码

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

  const { state:st } = useTabData();

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

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

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

推荐阅读