主頁 > .NET開發 > 將類更改為功能組件

將類更改為功能組件

2022-06-28 16:53:47 .NET開發

我嘗試將此 React 類組件轉換為函陣列件這是主類組件代碼我讓它作業正常

import React from "react";
import * as BooksAPI from "./BooksAPI";
import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

;

我轉換并變成這樣但它給了我一個錯誤(這是我將類更改為函式但它不起作用時的代碼

import React, { useEffect } from "react";
import * as BooksAPI from "./BooksAPI";
import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

uj5u.com熱心網友回復:

請嘗試此代碼

import React, {useEffect, useState} from "react";
import * as BooksAPI from "./BooksAPI";
import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Home from "./components/Home";
import Search from "./components/Search";

function BooksApp() {
  const [state, setState] = useState({
    showSearchPage: false,
    books: [],
    search: "",
    booksFromSearch: [],
    loadSearch: false,
  });

  useEffect(() => {
    BooksAPI.getAll().then((res) => {
      setState(prevState => ({
        ...prevState,
        books: res,
      }));
    });
  }, []);

  const handleBooksSearch = async (search) => {
    await BooksAPI.search(search).then((res) => {
      if (res && !res.error) {
        setState(prevState => ({
          ...prevState,
          booksFromSearch: res.map((booksSearch) => {
            prevState.books.forEach((book) => {
              if (booksSearch.id === book.id) booksSearch.shelf = book.shelf
            })
            return booksSearch;
          }),
          loadSearch: true,
        }));
      } else {
        setState(prevState => ({
          ...prevState,
          booksFromSearch: `No books like: " ${state.search} "`,
          loadSearch: false,
        }))
      }
    }); // then
    console.log("Search");
    console.log(state.booksFromSearch);
  };


  const changeShelf = async (book, shelf) => {
    await BooksAPI.update(book, shelf);
    await BooksAPI.getAll().then((res) => {
      setState(prevState => ({
        ...prevState,
        books: res,
      }));
    });
    handleBooksSearch(state.search)
  };

  const handleSearch = async (event) => {
    await setState(prevState => ({
      ...prevState,
      search: event.target.value,
    }));
    console.log(state.search);
    handleBooksSearch(state.search);
  };

  return (
      <Router>
        <div className="app">
          <Switch>
            <Route path="/search">
              <Search
                  handleSearch={handleSearch}
                  search={state.search}
                  booksFromSearch={state.booksFromSearch}
                  changeShelf={changeShelf}
                  loadSearch={state.loadSearch}
              />
            </Route>
            <Route path="/">
              <Home books={state.books} changeShelf={changeShelf} />
            </Route>
          </Switch>
        </div>
      </Router>
  );
}

export default BooksApp;

轉載請註明出處,本文鏈接:https://www.uj5u.com/net/496473.html

標籤:反应 功能 班级

上一篇:Flutter-如何在非高階函式上使用計算?

下一篇:返回列表

標籤雲
其他(140916) Python(36179) JavaScript(23607) Java(15876) C(14648) 區塊鏈(8222) C#(7573) AI(7469) 爪哇(7062) html(6473) MySQL(6434) 基礎類(6313) 熊猫(5920) sql(5897) PHP(5550) 数组(5497) R(5186) 腳本語言(PerlPython)(5129) Linux(5047) 非技術區(4971) 反应(4891) Android(4340) 数据框(4187) css(4080) 节点.js(3801) C語言(3288) C++語言(3117) json(3088) 列表(3008) 扑(2916) 安卓(2867) 打字稿(2832) Java相關(2746) VBA(2708) 疑難問題(2699) 單片機工控(2479) 细绳(2449) ASP.NET(2287) iOS(2285) MongoDB(2229) 麻木的(2166) 正则表达式(2154) 字典(2139) 循环(2107) 擅长(2083) 镖(2038) 迅速(2034) Web開發(1951) 功能(1896) Unity3D(1814) python-3.x(1807) 弹簧靴(1806) 谷歌表格(1800) 網絡通信(1793) xml(1783) 蟒蛇-3.x(1774) 數據庫相關(1767) .NETCore(1761) for循环(1755) VB基礎類(1755)

熱門瀏覽
  • WebAPI簡介

    Web體系結構: 有三個核心:資源(resource),URL(統一資源識別符號)和表示 他們的關系是這樣的:一個資源由一個URL進行標識,HTTP客戶端使用URL定位資源,表示是從資源回傳資料,媒體型別是資源回傳的資料格式。 接下來我們說下HTTP. HTTP協議的系統是一種無狀態的方式,使用請求/ ......

    uj5u.com 2020-09-09 22:07:47 more
  • asp.net core 3.1 入口:Program.cs中的Main函式

    本文分析Program.cs 中Main()函式中代碼的運行順序分析asp.net core程式的啟動,重點不是剖析原始碼,而是理清程式開始時執行的順序。到呼叫了哪些實體,哪些法方。asp.net core 3.1 的程式入口在專案Program.cs檔案里,如下。ususing System; us ......

    uj5u.com 2020-09-09 22:07:49 more
  • asp.net網站作為websocket服務端的應用該如何寫

    最近被websocket的一個問題困擾了很久,有一個需求是在web網站中搭建websocket服務。客戶端通過網頁與服務器建立連接,然后服務器根據ip給客戶端網頁發送資訊。 其實,這個需求并不難,只是剛開始對websocket的內容不太了解。上網搜索了一下,有通過asp.net core 實作的、有 ......

    uj5u.com 2020-09-09 22:08:02 more
  • ASP.NET 開源匯入匯出庫Magicodes.IE Docker中使用

    Magicodes.IE在Docker中使用 更新歷史 2019.02.13 【Nuget】版本更新到2.0.2 【匯入】修復單列匯入的Bug,單元測驗“OneColumnImporter_Test”。問題見(https://github.com/dotnetcore/Magicodes.IE/is ......

    uj5u.com 2020-09-09 22:08:05 more
  • 在webform中使用ajax

    如果你用過Asp.net webform, 說明你也算是.NET 開發的老兵了。WEBform應該是2011 2013左右,當時還用visual studio 2005、 visual studio 2008。后來基本都用的是MVC。 如果是新開發的專案,估計沒人會用webform技術。但是有些舊版 ......

    uj5u.com 2020-09-09 22:08:50 more
  • iis添加asp.net網站,訪問提示:由于擴展配置問題而無法提供您請求的

    今天在iis服務器配置asp.net網站,遇到一個問題,記錄一下: 問題:由于擴展配置問題而無法提供您請求的頁面。如果該頁面是腳本,請添加處理程式。如果應下載檔案,請添加 MIME 映射。 WindowServer2012服務器,添加角色安裝完.netframework和iis之后,運行aspx頁面 ......

    uj5u.com 2020-09-09 22:10:00 more
  • WebAPI-處理架構

    帶著問題去思考,大家好! 問題1:HTTP請求和回傳相應的HTTP回應資訊之間發生了什么? 1:首先是最底層,托管層,位于WebAPI和底層HTTP堆疊之間 2:其次是 訊息處理程式管道層,這里比如日志和快取。OWIN的參考是將訊息處理程式管道的一些功能下移到堆疊下端的OWIN中間件了。 3:控制器處理 ......

    uj5u.com 2020-09-09 22:11:13 more
  • 微信門戶開發框架-使用指導說明書

    微信門戶應用管理系統,采用基于 MVC + Bootstrap + Ajax + Enterprise Library的技術路線,界面層采用Boostrap + Metronic組合的前端框架,資料訪問層支持Oracle、SQLServer、MySQL、PostgreSQL等資料庫。框架以MVC5,... ......

    uj5u.com 2020-09-09 22:15:18 more
  • WebAPI-HTTP編程模型

    帶著問題去思考,大家好!它是什么?它包含什么?它能干什么? 訊息 HTTP編程模型的核心就是訊息抽象,表示為:HttPRequestMessage,HttpResponseMessage.用于客戶端和服務端之間交換請求和回應訊息。 HttpMethod類包含了一組靜態屬性: private stat ......

    uj5u.com 2020-09-09 22:15:23 more
  • 部署WebApi隨筆

    一、跨域 NuGet參考Microsoft.AspNet.WebApi.Cors WebApiConfig.cs中配置: // Web API 配置和服務 config.EnableCors(new EnableCorsAttribute("*", "*", "*")); 二、清除默認回傳XML格式 ......

    uj5u.com 2020-09-09 22:15:48 more
最新发布
  • 將類更改為功能組件

    我嘗試將此 React 類組件轉換為函陣列件這是主類組件代碼我讓它作業正常import React from "react";import * as BooksAPI from "./BooksAPI";import "./Ap...

    uj5u.com 2022-06-28 16:53:47 more
  • Flutter-如何在非高階函式上使用計算?

    我在使用計算功能時遇到問題。我有一個高階函式,如下所示; Future<DistrictTimeData> getDistrictTimeData(String path) async { Uri url = Uri.parse...

    uj5u.com 2022-06-28 16:53:09 more
  • 我們可以在函式末尾回傳建構式嗎

    我正在解決一個關于 leetcode 的問題,遇到了我難以理解的代碼,并通過互聯網搜索了答案,但沒有找到想要的答案問題是 leetcode 上的 Shuffle String。所以,這里...

    uj5u.com 2022-06-28 16:52:25 more
  • 使用.replace()創建函式以洗掉變數字串中的多個字符?

    該函式接受 3 個輸入:(字串 (str)、字串中的起點(索引)以及之后要洗掉的字符數(計數))。function removeFromString(str, index, count) { let newStr = ''; for...

    uj5u.com 2022-06-28 16:50:05 more
  • 嵌套for回圈的else陳述句

    我已經定義了一個函式,它根據它的 pos_tag 從句子中提取單詞。def get_trigram(pos_1, pos_2, pos_3): all_trigram = [] for j in range(len(df)):...

    uj5u.com 2022-06-28 16:48:55 more
  • 使用JavaScript編輯功能

    我必須使用 javascript 在動態生成的行中添加、編輯和洗掉功能。我堅持使用編輯功能。雖然我已經搜索過并且可以完成,但是使用了 php。我不需要 php 。有人...

    uj5u.com 2022-06-28 16:48:09 more
  • 從函式回傳二維陣列上的指標

    我是 C 新手,正在嘗試更改函式的回傳型別。問題是,例如,這些作業:float fct(int) float *fct(float)但是當我嘗試將回傳型別更改為:float (*)[n]fct(int *n) 編...

    uj5u.com 2022-06-28 16:47:31 more
  • OracleSQL用戶定義函式

    我正在嘗試撰寫 Oracle SQL 函式。應將國家代碼、最小年份和最大年份作為輸入,并應回傳包含該國家在指定年份的資訊的表。這是我試圖寫的,但我是 SQL 函式的...

    uj5u.com 2022-06-28 16:46:31 more
  • Python打字機函式在輸入中使用時不回傳任何內容?

    import random,sys,time,os os.system("cls")def dialogue(passage): # Function for dialogue to type slowly for letter in passa...

    uj5u.com 2022-06-28 16:45:52 more
  • 檢查字串是否由多次出現的子字串組成

    (JavaScript) 所以,我需要一個函式 checkString(str, substr) 來檢查一個字串是否由給定子字串的多次出現組成。
    示例:
    checkString("abc", "abc") -> true
    c...

    uj5u.com 2022-06-28 16:45:02 more