反應：如果輸入值由 state 更改且數據來自獲取，則觸發 onChange？

Question

我試圖從 API 中獲取數據，之后我將該數據存儲在 API 中並且它正在工作，但我想要一個輸入框（在粘貼網站 ZE6B391A8D2C4D45902A23A8B6585703 后的那個輸入框中，然后在那個按鈕上返回結果然后返回div UI，我沒有得到如何將 onchange() e.target 值設置為來自 API 響應的數據下面是我的代碼

import React, { useEffect, useState } from 'react'
import {Row, Col, Container, Button, Form, FormControl, Nav} from 'react-bootstrap'
export default function Home() {
const [State, setState] = useState("");

useEffect(() => {
    fetch("https://lighthouse-dot-webdotdevsite.appspot.com//lh/newaudit", {
      method: "POST",
      body: JSON.stringify({
      "url": "https://piyushsthr.netlify.app",
      "replace": true,
      "save": false
    }),
      headers: {
        "Content-Type": "application/json; charset=utf-8"
      },
      credentials: "same-origin"
    })
     .then(res => res.json()) // this is the line you need
     .then(function(data) {
  
      setState(data.lhrSlim[0].score);

    }).catch(function(error) {
      // eslint-disable-next-line no-unused-expressions
      error.message
    })
  }, )
  return (
    <div>
       <Container >
        <h1>Enter Your website URL🛸</h1>
        <Form >{/* onSubmit={} */}
            <FormControl type="text" placeholder="Search" className="mr-sm-2" name="query"/>
            <Button type="submit">Search🔍</Button>
          </Form>
      </Container>
      <h1>{State}</h1>
    </div>
  )
}

任何人都可以幫助我解決這件事，並建議我一些關於如何提高我的這種編碼技能的提示/資源。

Answer 1

那么你的第一個問題。 如果要將輸入值設置為 API 請求的結果。 你應該只需要添加value={State} 。

return (
    <div>
       <Container >
        <h1>Enter Your website URL🛸</h1>
        <Form >{/* onSubmit={} */}
            <FormControl type="text" value={State} placeholder="Search" className="mr-sm-2" name="query"/>
            <Button type="submit">Search🔍</Button>
          </Form>
      </Container>
      <h1>{State}</h1>
    </div>
  )

如需資源推薦，請閱讀 Robinwieruch 博客和書籍。

Answer 2

你可以做這樣的事情：

import React, { useEffect, useState, useRef } from "react";
import { Container, Button, Form, FormControl } from "react-bootstrap";
export default function Home() {
  const [State, setState] = useState("");
  const ref = useRef(0); // add a ref to remove value from input when fetch is finish
  const [userUrl, setUserUrl] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  //if you don't need to fetch data when component is mount you can remove all the useEffect
  useEffect(() => {
    onFetch("https://piyushsthr.netlify.app");
  }, []); //passing a empty array told useEffect to be play only at the component did mount state
  const onFetch = (url) => {
    setIsLoading(true);
    fetch("https://lighthouse-dot-webdotdevsite.appspot.com//lh/newaudit", {
      method: "POST",
      body: JSON.stringify({
        url: url,
        replace: true,
        save: false
      }),
      headers: {
        "Content-Type": "application/json; charset=utf-8"
      },
      credentials: "same-origin"
    })
      .then((res) => res.json()) // this is the line you need
      .then(function (data) {
        console.log(data);
        setState(data.lhrSlim[0].score);
      })
      .catch(function (error) {
        // eslint-disable-next-line no-unused-expressions
        error.message;
      })
      .finally((_) => {
        setIsLoading(false);
        ref.current.value = "";
      });
  };
  return (
    <div>
      <Container>
        <h1>
          Enter Your website URL
          <span role="img" aria-label="ufo">
            🛸
          </span>
        </h1>
        <Form
          onSubmit={() => {
            onFetch(userUrl);
          }}
        >
          <FormControl
            ref={ref}
            type="text"
            placeholder="Search"
            className="mr-sm-2"
            name="query"
            onChange={(e) => {
              setUserUrl(e.target.value);
            }}
          />
          <Button>
            Search
            <span role="img" aria-label="search-icon">
              🔍
            </span>
          </Button>
        </Form>
      </Container>
      {isLoading ? <h2>Loading...</h2> : <h2>{State}</h2>}
    </div>
  );
}

我也從按鈕道具中刪除了type="submit"以避免您的組件重新渲染。