当我使用 async-await 和 useEffect 时，我应该如何存储获取的数据？

Question

I have to fetch a player's stats based on the input given by the user, and then display it. I am having trouble storing the fetched data, using useEffect hook. Please suggest if there's a better way.

    import React, { useEffect, useState } from 'react'
import HLTV from 'hltv';

const getPlayer = async ({ name }) => {
    HLTV.getPlayerByName({ name: name })
        .then(res => console.log(res))
}

const Search = () => {

    const [text, setText] = useState('');

    const onChange = (e) => {
    setText(e.target.value);
}

useEffect(() => {
    getPlayer(text)
}, [text])


return (
    <div>
        <form className="form">
            <input type="text"
                name="text" placeholder="Enter user" onChange={onChange} />
            <input type="Submit"
                defaultValue="search"
                className="btn btn-dark btn-block" />
        </form>

    </div>
)

}

export default Search

Answer 1

You can store the player using a useState hook, as follows. You also need to bring the getPlayer() function inside the Search function so that you can access the player variable. Also, when you use an async function , you don't need to use then ; you can use await instead.

One last thing to point out: If you're making network calls, you have to account for the possibility that they could fail, so you might want to put the call to getPlayerByName within a try catch.

stackblitz here

import React, { useState, useEffect } from "react";
import "./style.css";

const HLTV = {
  getPlayerByName: (name) => {

    return Promise.resolve({
      name: "result:" + name,
    });
  }
};

export const Search = () => {
  const [player, setPlayer] = useState({ name: 'nobody'});

  const [text, setText] = useState("initial text");

  const onChange = e => {
    setText(e.target.value);
  };

  const getPlayer = async (name) => {
    const player = await HLTV.getPlayerByName(name);

    setPlayer(player);
  };

  useEffect(() => {
    getPlayer(text);
  }, [text]);

  return (
    <form className="form">
      <div>text: {text}</div>
      <pre>Player: {JSON.stringify(player, null, 2)}</pre>
      <input
        type="text"
        name="text"
        value={text}
        placeholder="Enter user"
        onChange={onChange}
      />
      <input
        type="Submit"
        defaultValue="search"
        className="btn btn-dark btn-block"
      />
    </form>
  );
};