javascript — ошибка при использовании метода create с HTTPS Post request [ReactJs]

Ошибка при использовании метода create с HTTPS Post request [ReactJs]

поэтому я недавно работал над панелью администратора для страницы, которая отображает список карточек (некоторые видео и некоторые текстовые). Я размещаю локальный API, который генерирует 7 различных уникальных сообщений данных (в том числе идентификатор сообщения, заголовок, URL, thumbnailUrl). Мне удалось создать 2 отдельных метода, один из которых — удаление карты, а другой — кнопка редактирования карты. Сейчас я пытаюсь добавить кнопку «Создать», которая открывает модальное всплывающее окно с пустыми полями, что позволяет администратору вставлять его, и после нажатия кнопки «Создать» новое поле данных добавляется в базу данных API.

Код ниже предназначен для созданного модуля HelpList.tsx (он отвечает за отображение списка карточек), который содержит методы deleteProduct, editProduct и createProduct. Я попытался основать свою функцию createProduct на функции editProduct, хотя я не уверен, будет ли функция знать, как дать карте / посту увеличенный и соответствующий идентификатор.

 import React, { Component } from "react"; import HelpCard from "./HelpCard"; import "../help/HelpCard.css"; import axios from "axios"; import InfiniteScroll from "react-infinite-scroller"; import Popup from "reactjs-popup"; interface State { url: string; title: string; adminhelpcard: SingleAdminHelpCard[]; error: null; response: {}; thumbnail: string; } interface SingleAdminHelpCard { id: string; url: string; title: string; thumbnail: string; } interface Props { //createProduct: (title: string, url: string, thumbnail: string) ={amp}gt; void; } export default class HelpList extends Component{amp}lt;Props, State{amp}gt; { state = { title: "", thumbnail: "", id: "", url: "http://localhost:3000/videos/", adminhelpcard: [], itemsCountPerPage: 1, activePage: 1, error: null, response: {} //isEditProduct: true, //isAddProduct: true }; loadAdminHelpCard = () ={amp}gt; { axios .get(this.state.url) .then((res) ={amp}gt; { this.setState((prevState) ={amp}gt; { const adminhelpcard = prevState.adminhelpcard; return { adminhelpcard: [...prevState.adminhelpcard, ...res.data], url: res.data.next }; }); }) .catch(function(error) { // handle error console.log(error); }); }; static props: any; async componentDidMount() { const apiUrl = "http://localhost:3000/videos/"; const res = await axios.get(this.state.url); this.setState({ adminhelpcard: res.data }); fetch(apiUrl) .then((res) ={amp}gt; res.json()) .then( (result) ={amp}gt; { this.setState({ adminhelpcard: result }); }, (error) ={amp}gt; { this.setState({ error }); } ); } deleteProduct(id: any) { const { adminhelpcard } = this.state; const apiUrl = `http://localhost:3000/videos/${id}`; const options = { method: "DELETE" }; fetch(apiUrl, options) .then((res) ={amp}gt; res.json()) .then( (result) ={amp}gt; { this.setState({ response: result, adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) ={amp}gt; adminhelpcard.id !== id) }); }, (error) ={amp}gt; { this.setState({ error }); } ); console.log(this.state.id); } editProduct(id: any, title: string, url: string, thumbnail: string) { const { adminhelpcard } = this.state; const apiUrl = `http://localhost:3000/videos/${id}`; const options = { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title, url, thumbnail }) }; fetch(apiUrl, options) .then((res) ={amp}gt; res.json()) .then( (result) ={amp}gt; { this.setState({ response: result, adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) ={amp}gt; adminhelpcard.id !== id) }); }, (error) ={amp}gt; { this.setState({ error }); } ); } createProduct(title: string, url: string, thumbnail: string) { const apiUrl = `http://localhost:3000/videos/`; const options = { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title, url, thumbnail }) }; fetch(apiUrl, options) .then((res) ={amp}gt; res.json()) .then( (result) ={amp}gt; { this.setState({ response: result }); }, (error) ={amp}gt; { this.setState({ error }); } ); } render() { console.log(this.state.adminhelpcard); return ( {amp}lt;div{amp}gt; {amp}lt;React.Fragment{amp}gt; {this.state.adminhelpcard ? ( {amp}lt;div className="row"{amp}gt; {amp}lt;InfiniteScroll pageStart={1} loadMore={this.loadAdminHelpCard} hasMore={this.state.url ? true : false} threshold={0} loader={ {amp}lt;div className="loader" key={0}{amp}gt; Loading ... {amp}lt;/div{amp}gt; }{amp}gt; {this.state.adminhelpcard.map((adminhelpcard: SingleAdminHelpCard, i) ={amp}gt; ( {amp}lt;HelpCard id={adminhelpcard.id} key={adminhelpcard.id   i} title={adminhelpcard.title} url={adminhelpcard.url} thumbnail={adminhelpcard.thumbnail} deleteProduct={this.deleteProduct.bind(this)} editProduct={this.editProduct.bind(this)} /{amp}gt; ))} {amp}lt;/InfiniteScroll{amp}gt; {amp}lt;/div{amp}gt; ) : ( {amp}lt;h1{amp}gt;Loading Cards{amp}lt;/h1{amp}gt; )} {amp}lt;/React.Fragment{amp}gt; {amp}lt;/div{amp}gt; ); } } 

Затем я вызываю функции editProduct и deleteProduct для кнопок, доступных в HelpCard.tsx, который отвечает за создание структуры самой карты.

Приведенный ниже код предназначен для видеокарты, которая также содержит компонент (модальная подсказка), который содержит поля и функции editProduct:

 {amp}lt;div className="horizontalCard"{amp}gt; {amp}lt;div className="innerCard"{amp}gt; {amp}lt;div className="leftImage"{amp}gt; {amp}lt;img className="Sprite" onLoad={() ={amp}gt; this.setState({ imageLoading: false })} onError={() ={amp}gt; this.setState({ tooManyRequests: true })} src={this.state.thumbnail} style={ this.state.tooManyRequests ? { display: "none" } : this.state.imageLoading ? { display: "null" } : { display: "null" } } /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="rightText"{amp}gt; {amp}lt;div className="card-body"{amp}gt; {this.state.title} {amp}lt;div className="cardButtons"{amp}gt; {amp}lt;Popup trigger={{amp}lt;button className="btn"{amp}gt;Edit{amp}lt;/button{amp}gt;} position="left center"{amp}gt; {amp}lt;form onSubmit={(e) ={amp}gt; e.preventDefault()} id="videoCardEdit" style={{ width: "auto", height: "auto" }}{amp}gt; {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label{amp}gt;Title:{amp}lt;/label{amp}gt; {amp}lt;input name="videoCardTitle" onChange={(e) ={amp}gt; { this.setState({ title: e.target.value }); }} value={this.state.title}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label{amp}gt;URL:{amp}lt;/label{amp}gt; {amp}lt;input name="videoCardURL" onChange={(e) ={amp}gt; { this.setState({ url: e.target.value }); }} value={this.state.url}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label{amp}gt;Thumbnail URL:{amp}lt;/label{amp}gt; {amp}lt;input name="videoCardThumbnail" onChange={(e) ={amp}gt; { this.setState({ thumbnail: e.target.value }); }} value={this.state.thumbnail}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button className="btnConfirm" style={{ float: "left" }} onClick={() ={amp}gt; this.props.editProduct( this.props.id, this.state.title, this.state.url, this.state.thumbnail ) } id="confirmModalBtn"{amp}gt; confirm {amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/Popup{amp}gt; {amp}lt;button onClick={() ={amp}gt; this.props.deleteProduct(this.props.id)} className="btn"{amp}gt; Delete {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Наконец, я вставляю кнопку «Создать» на своей странице HelpAdmin.view.tsx (это более или менее мой index.tsx / app.tsx для этой задачи, поскольку я отображаю свой список и кнопку на этой странице панели) , Я пытаюсь реализовать кнопку «Создать», чтобы она отображалась поверх создаваемого компонента. Код для следующей страницы выглядит следующим образом:

 import React, { Component } from "react"; import HelpList from "../components/helpAdmin/help/HelpList"; import "../components/helpAdmin/help/HelpList"; import Popup from "reactjs-popup"; interface Props { createProduct: (title: string, url: string, thumbnail: string) ={amp}gt; void; } interface State { title: string; thumbnail: string; id: string; url: string; } export class HelpAdminView extends Component{amp}lt;Props, State{amp}gt; { componentDidMount() {} render() { return ( {amp}lt;main{amp}gt; {amp}lt;div className="box"{amp}gt; {amp}lt;Popup trigger={{amp}lt;button className="btn"{amp}gt; Create a new card{amp}lt;/button{amp}gt;} position="right center"{amp}gt; {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label{amp}gt;Title:{amp}lt;/label{amp}gt; {amp}lt;input name="createCardTitle" onChange={(e) ={amp}gt; { this.setState({ title: e.target.value }); }} value={this.state.title}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label{amp}gt;URL:{amp}lt;/label{amp}gt; {amp}lt;input name="createCardURL" onChange={(e) ={amp}gt; { this.setState({ url: e.target.value }); }} value={this.state.url}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label{amp}gt;Thumbnail URL:{amp}lt;/label{amp}gt; {amp}lt;input name="createCardThumbnail" onChange={(e) ={amp}gt; { this.setState({ thumbnail: e.target.value }); }} value={this.state.thumbnail}{amp}gt;{amp}lt;/input{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button style={{ float: "left" }} onClick={() ={amp}gt; this.props.createProduct(this.state.title, this.state.url, this.state.thumbnail)} className="btnCreate" id="confirmModalBtn"{amp}gt; Create {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Popup{amp}gt; {amp}lt;HelpList /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/main{amp}gt; ); } } export default HelpAdminView; 

Этот код, кажется, постоянно выдает мне следующую ошибку при попытке запустить проект, и это выглядит следующим образом:

 Type error: Property 'createProduct' is missing in type '{}' but required in type 'Readonly{amp}lt;Props{amp}gt;'. TS2741 

Я не уверен, почему возникает эта ошибка, хотя я пытался вызывать эту функцию так же, как пытался вызвать ранее работающие. Есть ли что-то, чего мне здесь явно не хватает?

Спасибо за любую помощь заранее!

——————————РЕДАКТИРОВАТЬ——————- —————

Следующий код представляет собой интерфейсные реквизиты, доступные в HelpCard.Tsx. Затем функции вызываются, как показано в приведенном выше коде onClick:

 interface Props { id: string; url: string; title: string; thumbnail: string; deleteProduct: (id: any) ={amp}gt; void; editProduct: (id: any, title: string, url: string, thumbnail: string) ={amp}gt; void; } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector