Блог

У меня возникли некоторые проблемы с использованием API в React, я пытаюсь передать заголовок, описание и ежедневную цену в свое приложение домой, но я получаю сообщение об ошибке «В типе» {} «отсутствуют следующие свойства типа «Только для чтения»: imagem, titulo, descricao, diaria и еще 2″.

Я пробовал работать над интерфейсом, добавляя некоторые значения как необязательные, но это не сработало, и я хотел бы получить некоторую помощь, вот 3 файла, которые используются.

Casa.ts

 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.Componentlt;Casa, anygt; {  constructor(props: Casa) {  super(props);   this.state = {  casas: [],  dadosCarregados: false,  };  }   componentDidMount() {  fetch("http://localhost:4000/casas")  .then((res) =gt; res.json())  .then((json) =gt; {  this.setState({  casas: json,  dadosCarregados: true,  });  });  }  render() {  const { dadosCarregados, casas } = this.state;  if (!dadosCarregados) {  return lt;h1gt;Carregando...lt;/h1gt;;  }   return (  lt;div className="App"gt;  lt;h1gt;Hospedagenslt;/h1gt;{" "}  {casas.map((casa: any) =gt; (  lt;ol key={casa.id}gt;  Título da casa: {casa.titulo}, Descrição: {casa.descricao}, Preço da diária: {casa.diaria}  lt;/olgt;  ))}  lt;/divgt;  );  } }  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(  lt;React.StrictModegt;  lt;BrowserRoutergt;  lt;Routesgt;  lt;Route path="/" element={lt;App /gt;} gt;  lt;Route path="/" element={lt;Home /gt;} /gt;  lt;Route path="sobre" element={lt;Sobre /gt;} /gt;  lt;Route path="adicionar" element={lt;AdicionarHospedagem /gt;} /gt;  lt;/Routegt;  lt;/Routesgt;  lt;/BrowserRoutergt;  lt;/React.StrictModegt;,  document.getElementById('root') );  reportWebVitals();  

Я искал здесь на форуме некоторых людей, у которых была такая же проблема, но они забыли передать интерфейс в реквизитах, и, как показано в приведенном выше коде, он был передан в параметрах класса

Ошибка происходит в файле index.tsx

тип {} означает, что вы передали пустой объект

тип Casa ожидает 6 объектов недвижимости, которые вы не предоставили

вам следует попробовать ввести необходимые параметры

 lt;Home id="" imagem="" titulo=""... /gt;  

где вы заменяете «» на фактическое значение, которое вы хотите