類型“{}”缺少“只讀”類型中的以下屬性

Question

我在 React 中使用 API 時遇到了一些麻煩，我正在嘗試將標題、描述和每日價格傳遞到我的應用程序主頁，但我收到錯誤“類型 '{}' 缺少以下屬性來自“只讀”類型：imagem、titulo、descricao、diaria 和另外 2 個。”

我已經嘗試在界面上工作，將一些值作為可選值，但它沒有用，我需要一些幫助，這是正在使用的 3 個文件。

卡薩

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

主頁.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;

索引.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 文件中

Answer 1

type {}表示你傳入了一個空對象

類型 Casa 需要 6 個您沒有提供的屬性

您應該嘗試傳入所需的參數

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

用你想要的實際值替換 ""