时间戳

首页 > 解决方案 > ReactJS - 传播运算符语法+钩子函数错误

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

问题描述

我是 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;

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

  2. 当我的 'sortBy' 函数被触发时，我收到一条错误消息，说“ setSort不是一个函数”。它是函数中的一个钩子，所以我对此很困惑？？

显然我的代码还不是很好，希望你能理解！

标签： reactjsstatespread-syntaxuse-state

解决方案

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

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

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

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

推荐阅读