如何在反应中将输入的值绑定到 link

Question

我想创建一个简单的应用程序，您可以在其中搜索图像。该应用程序是使用 fetch（我不能使用 axios）和 Unsplash API 在 React 中编写的。我当前的尝试将具有静态值“cars”的图像列表渲染到 link 中，如图所示：https://api.unsplash.com/search/photos?query=**cars** 在下面的代码示例中，我使用变量“${query}”来搜索图像，但它不起作用。我需要帮助来弄清楚如何解决这个问题。提前致谢！

代码：

import React from "react";
import { useState, useEffect } from "react";

export default function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [query, setQuery] = useState("");

      useEffect(() => {
        fetch(`https://api.unsplash.com/search/photos?query=${query}`, {
          headers: {
            Authorization: "Client-ID UnsplashId",
          },
        })
          .then((response) => {
            if (!response.ok) {
              throw new Error(
                `This is an HTTP error: The status is ${response.status}`
              );
            }
            return response.json();
          })
          .then((actualData) => {
            console.log(actualData);
            setData(actualData.results);
            setError(null);
          })
          .catch((err) => {
            setError(err.message);
            setData(null);
          });
      }, []);
    
      return (
        <div>
          {/* onSubmit={this.handleSubmit} */}
          <form>
            <label>
              <input
                placeholder="Search"
                type="text"
                // value={this.state.value}
                // value="cars"
                onChange={(e) => setQuery(e.target.value)}
              />
            </label>
            <input type="submit" value="Submit" />
          </form>
    
          {data &&
            data.map(({ id, description, urls }) => (
              <img key={id} alt={description} src={urls.regular} />
            ))}
        </div>
      );
    }

Answer 1

我觉得你想实现conditionally firing an effect

例子


 useEffect(() => {

    // This will execute whenever 'query' variable changes.       
 
 }, [ query ]);
    

// You can bind the state using the 'value' attribute.

<input 
   placeholder="Search"
   type="text"
   value={query}
   onChange={(e) => setQuery(e.target.value)}
/>

Answer 2

我没有悄悄地得到问题，但我认为你想在每次输入更改时进行搜索，因此我建议使用输入而不是表单并将“查询”添加到“useEffect”条件：

   useEffect(() => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}`, {
      headers: {
        Authorization: "Client-ID UnsplashId",
      },
    })
      .then((response) => {
        // here
  }, [query]);

<input
     placeholder="Search"
     type="text"
     onChange={(e) => setQuery(e.target.value)} />

如何在反应中将输入的值绑定到 link

How to bind an input's value to a link in react

reactjs

react-native

react-hooks