reactjs - 使用 typescript : Property 'data' does not exist on type react 钩子(Hook)

标签 reactjs typescript react-hooks

我有一个毫无意义的错误,我正在用钩子(Hook)输入我的状态的值,但他说错误是不同的类型。

已经尝试过使用空数组,甚至是带有一些数据的数组,并且总是错误相同。

import React, { useState } from 'react';
import { Row, Col } from 'config/styles';
import Bed from './Bed';

interface DataTypes {
  date: string;
  value: number;
}

function Beds(): JSX.Element {
  const { data, setData } = useState<DataTypes[]>([]);

  return (
    <>
      <Row>
        {data.map((d, i) => (
          <Col key={i} sm={16.666} lg={10}>
            <Bed {...d} />
          </Col>
        ))}
      </Row>
    </>
  );
}

export default Beds;

错了:
TypeScript error in /Users/keven/Documents/carenet/orquestra-frontend/src/Beds/index.tsx(11,11):
Property 'data' does not exist on type '[DataTypes[], Dispatch<SetStateAction<DataTypes[]>>]'

最佳答案

它应该是一个数组,而不是一个对象:

const [data, setData] = useState<DataTypes[]>([]);

您在错误消息中有此指示:
type '[DataTypes[], Dispatch<SetStateAction<DataTypes[]>>]'

关于reactjs - 使用 typescript : Property 'data' does not exist on type react 钩子(Hook),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58140242/

相关文章:

javascript - 从 react 数组中删除

reactjs - 为什么编辑器字段不以 react-hook-form 呈现最近的数据

reactjs - 如何从钩子(Hook) react 组件中获取 TextField(Material-UI) 值?

javascript - 使用 useMemo 防止重新渲染子组件数组时性能受到影响 | react

javascript - 直接设置 DOM 属性和通过 requestAnimationFrame 设置有什么区别?

python - Flask:将服务器上的 Python 变量传递给 React 组件

javascript - React Refactoring 组件有太多的 Prop

Angular HTTP 拦截器订阅 observable 然后返回 next.handle 但抛出 TypeError : You provided 'undefined'

typescript - 模块导入返回空对象