反应：如果输入值随状态变化而数据来自获取，则触发 onChange？

如何解决反应：如果输入值随状态变化而数据来自获取，则触发 onChange？

我试图从 API 获取数据之后，我将该数据存储在 API 中并且它正在工作，但我想要一个输入框（在粘贴网站 URL 后在该输入框中，然后单击该按钮后我想加载那些结果返回 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>
  )
}

任何人都可以帮助我解决这个问题，并就如何提高我的这种编码技能向我建议一些提示/资源。

解决方法

好吧，对于你的第一个问题。如果要将输入值设置为 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 博客和书籍。

,

你可以做这样的事情：

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" 以避免您的组件重新渲染。