React useEffect onClick Refetch Data - 更改参数

点击提交按钮时会触发 onSubmit 事件，无需您单独处理 onClick 事件。

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

export default function Game() {
  const [error,setError] = useState(null);
  const [name,setName] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    console.log( name );
    fetchData(Name);
  }
  
  const fetchData = (Name) => {
    fetch(`https://anapioficeandfire.com/api/characters?name=${name}`)
      .then((res) => res.json())
      .then((data) => {
        console.log(data[0].Name); // the data I want BACk
      })
      .catch((error) => {
        console.log("Error",error);
        setError(error);
      });
  }

  useEffect(() => {
    fetchData(Name);
  },[]);

  return (
    
      <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(E) => setName(e.target.value)}
        placeholder="Name"
      />
      <input type="submit" value="Submit" onClick={handleClick}/>
    </form>
  );
}

添加另一个有状态变量。您不仅需要 输入值 的值和设置器，还需要您希望能够在其他地方使用的 API 结果的值和设置器。也许像

const [searchText,setSearchText] = useState('');
const [result,setResult] = useState('');

// inside fetch callBACk:
setResult(data[0]?.name ?? ''); // use optional chaining to not throw an error
// if there is no result

<input
  type="text"
  value={searchText}
  onChange={(E) => setSearchText(e.target.value)}
  placeholder="Name"
/>

然后您可以在需要的地方使用 result。

现场演示：

const App = () => {
  const [error,setError] = React.useState(null);
  const [searchText,setSearchText] = React.useState('');
  const [result,setResult] = React.useState('');

  const handleSubmit = e => {
    e.preventDefault();
    console.log( name );
  }

  React.useEffect(() => {
    fetch(`https://anapioficeandfire.com/api/characters?name=${searchText}`)
      .then((res) => res.json())
      .then((data) => {
        setResult(data[0] ? data[0].name : '');
      })
      .catch((error) => {
        console.log("Error",error);
        setError(error);
      });
  },[searchText]);
  console.log(result);

  return (
    
      <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={searchText}
        onChange={(E) => setSearchText(e.target.value)}
        placeholder="Name"
      />
      <input type="submit" value="Submit" onClick={e => e.preventDefault()}/>
    </form>
  );
}

ReactDOm.render(<App />,document.querySELEctor('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

,

可以在handleClick函数中直接使用状态变量[name]。

其他答案都是正确的，您应该在 handleSubmit 中触发提取。我只是想附上一些用于渲染结果的示例代码，因为您寻求帮助。

API 返回一个字符数组。我们想通过该结果 @H_731_5@map 并显示每个字符。如果没有结果，我们还想告诉用户（特别是因为这个 API 似乎只能使用确切的名称，并且会返回“Arya Stark”的结果，而不是“Stark”的结果）。我们不想在提交之前显示“未找到字符”消息。

我正在使用 setState 钩子来存储 character 中的 API 匹配数组。我将状态初始化为 undefined 而不是 []，以便我们仅在设置为 [] 时才显示无结果消息。

我的代码允许用户多次提交。我们一直显示以前的结果，直到他们提交新的搜索。一旦我们的数组处于 characters 状态，我们就会显示这些结果。

// an example component to render a result
const RenderCharacter = ({ name,aliases }) => {
  return (
    <div>
      <h2>{name}</h2>
      {aliases.length && (
        <div>
          <h3>Aliases</h3>
          <ul>
            {aliases.map((a) => (
              <li key={a}>{a}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default function Game() {
  // current form input
  const [name,setName] = useState("");
  // save characters returned from the API
  // start with undefined instead of empty array
  // so we know when to show "no characters found" message
  const [characters,setCharacters] = useState();
  // store API errors
  const [error,setError] = useState(null);

  const fetchData = () => {
    fetch(`https://anapioficeandfire.com/api/characters?name=${name}`)
      .then((res) => res.json())
      .then(setCharacters) // store data to state
      .then(() => setError(null)) // clear previous errors
      .catch((error) => {
        console.log("Error",error);
        setError(error);
        setCharacters(undefined); // clear previous character matches
      });
  };

  const handleSubmit = (E) => {
    e.preventDefault();
    fetchData();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(E) => setName(e.target.value)}
          placeholder="Name"
        />
        <input type="submit" value="Submit" />
      </form>
      {Characters !== undefined &&
        (characters.length === 0 ? (
          <div>No Characters Found</div>
        ) : (
          <div>
            {Characters.map((character) => (
              <RenderCharacter key={Character.namE} {...character} />
            ))}
          </div>
        ))}
      {error !== null && <div>Error: {error.messagE}</div>}
    </div>
  );
}

Code Sandbox Demo（带有打字稿注释）