reactjs - 类型 '{}' 缺少类型 'Readonly' 的以下属性

我在使用 React 的 API 时遇到了一些问题，我正试图将标题、描述和每日价格传递到我的应用主页，但我收到错误提示 “类型 '{}' 缺少类型 'Readonly' 的以下属性: imagem, titulo, descricao, diaria, 以及另外 2 个。”

我尝试过在接口上将一些值设置为可选，但没有成功，我想寻求一些帮助，这里是正在使用的三个文件。

Casa.ts

export interface Casa {
  id?: string;
  imagem: string;
  titulo: string;
  descricao: string;
  diaria: number;
  cidade: string;
  estado: string;
}

Home.tsx

import React from "react";
import { Casa } from "../../backend/entidades/casas";

class criarCards extends React.Component<Casa, any> {
  constructor(props: Casa) {
    super(props);

    this.state = {
      casas: [],
      dadosCarregados: false,
    };
  }

  componentDidMount() {
    fetch("http://localhost:4000/casas")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          casas: json,
          dadosCarregados: true,
        });
      });
  }
  render() {
    const { dadosCarregados, casas } = this.state;
    if (!dadosCarregados) {
      return <h1>Carregando...</h1>;
    }

    return (
      <div className="App">
        <h1>Hospedagens</h1>{" "}
        {casas.map((casa: any) => (
          <ol key={casa.id}>
            Título da casa: {casa.titulo}, Descrição: {casa.descricao}, Preço da diária: {casa.diaria}
          </ol>
        ))}
      </div>
    );
  }
}

export default criarCards;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';
import Home from './Home';
import Sobre from "./Sobre";
import { AdicionarHospedagem } from './AdicionarHospedagem';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} >
      <Route path="/" element={<Home />} />
        <Route path="sobre" element={<Sobre />} />
        <Route path="adicionar" element={<AdicionarHospedagem />} />
      </Route>
    </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

我在论坛上查看了一些遇到同样问题的人，但他们忘记在 props 中传递接口，正如上面的代码所示，它是在类参数中传递的

错误发生在 index.tsx 文件中

答案＃1

类型 {} 意味着你传入了一个空对象

类型 Casa 期望 6 个属性，但你没有提供

你应该尝试传入所需的参数

<Home id="" imagem="" titulo=""... />

在此处用你想要的实际值替换 ""