ReactJS - 传播运算符语法+钩子函数错误答案

【问题标题】：ReactJS - Spread operator syntax + hooks function errorReactJS - 传播运算符语法+钩子函数错误
【发布时间】：2020-07-12 22:55:17
【问题描述】：

我是 Web 开发的新手，并且处于不知道在进行 Web 搜索时使用哪些词的不舒服区域。我对课程的了解不多，因为我的老师告诉我们要避免使用它，不幸的是，我找到的唯一答案与课程有关。我正在尝试将排序功能应用于数据表，并且仅在我尝试的最开始，但在两件事上苦苦挣扎：

import CountryCases from "../Components/CountryCases";
import NewsColumn from "../Components/NewsColumn";
import { Cases } from "../State/use-backend";

const HomeView = () => {
  const { data } = Cases(); // data is an object with 200 arrays //
  const stats = {...data};
  const { sort, setSort } = useState([]);

  const sortBy = key => {
    setSort(stats);
    console.log(sort);
  };

  return (
    <div className="home-view__container">
      <CountryCases stats={stats} sortBy={sortBy} />
      <NewsColumn />
    </div>
  );
};

export default HomeView;

将 API 对象分配给我的组件中的 const。（我正在使用扩展迭代器，它可以工作，但当我在挂钩中使用它时不起作用 - 例如 - 'useState({...data})'。当我不使用扩展运算符时，它显示“未定义”。所以现在我正在单独创建“排序，setSort”，但是将我的“统计”对象分配为值也返回未定义。有人可以解释一下这种数据通信是如何工作的吗？
当我的 'sortBy' 函数被触发时，我收到一条错误消息“setSort 不是一个函数”。它是函数中的一个钩子，所以我对此很困惑？？

显然我还不会说代码，希望你能理解！

【问题讨论】：

回答了第二个问题，但是我怀疑Cases() 返回的是一个承诺而不是一个普通的对象。您可能想检查console.log(Cases()) 看它是否显示Promise { something }。
它返回 - function Cases() {} : "Function" 当我控制台日志 'stats' 显示对象时，如果我在 stats 上使用扩展运算符，我的 setSort 接受整个对象。我会去阅读有关承诺的内容以更好地理解这一点，谢谢！

标签： reactjs state spread-syntax use-state

【解决方案1】：

只是错别字

const [sort, setSort] = useState([]);  // use [ ] not { }

【讨论】：

facepalm 谢谢！
确定没问题@OhGee 不要忘记接受我的回答

【解决方案2】：

你调用useState是错误的，它是一个元组，而不是返回的对象：

const [ sort, setSort ] = useState([]);

您可以在此处阅读有关钩子的更多信息：https://reactjs.org/docs/hooks-intro.html

关于您的数据问题：data 最初是未定义的，它会在提取完成时填充，因此您不能将其用作 useState 的初始值。

【讨论】：

谢谢，真是个愚蠢的错误。 facepalm 那么在这种情况下，为我的排序功能创建一个额外的状态是最佳做法吗？即 [sort, setSort] 并且只在 sortBy 函数中赋值？