延迟 onClick 响应 React App（适用于第二次点击但不是第一次）答案

【问题标题】：Delayed onClick response React App (works on the second click but not the first)延迟 onClick 响应 React App（适用于第二次点击但不是第一次）
【发布时间】：2021-01-03 15:12:38
【问题描述】：

所以，我有一个 onClick 附加到一个我想调用 tenDrinks 函数的按钮。第一次单击时，我返回一个空数组。在第二次点击时，我从我的 axios 调用中收到了我想要的东西。有没有人有明确的理由解释为什么？并解释我可能需要做些什么来解决这个问题？

可以在底部找到带有控制台日志的页面图片以进行可视化。

import axios from 'axios';

const Home = () => {
  const [randomDrinks, setRandomDrinks] = useState([]);

  const tenDrinks = async () => {
    const config = {
      method: 'GET',
      url: 'https://the-cocktail-db.p.rapidapi.com/randomselection.php',
      headers: {
        'content-type': 'application/octet-stream',
        'x-rapidapi-host': 'the-cocktail-db.p.rapidapi.com',
        'x-rapidapi-key': 'ff61de8c3fmshdbbdcfd2003501ep1d77b7jsn0bc9bc4a1b9b',
        useQueryString: true,
      },
    };

    await axios(config)
      .then((res) => setRandomDrinks(res.data.drinks))
      .then((res) => console.log(randomDrinks))
      // .then((random) => console.log(randomDrinks))
      .catch(console.error);

    const eachDrink = randomDrinks.map((drink) => (
      <div key={drink.idDrink}>{drink.strDrink}</div>
    ));
    console.log(randomDrinks[0]);
    return (
      <div className='randomDrink'>
        <h3>{eachDrink}</h3>
      </div>
    );
  };
  // tenDrinks();
  const onClick = () => {
    tenDrinks();
  };

  return (
    <div>
      <button onClick={onClick}>Get 10 random cocktails</button>
      {/* <RandomDrinks /> */}
    </div>
  );
};

export default Home;
```[enter image description here][1]


  [1]: https://i.stack.imgur.com/Y2ZJ3.png

【问题讨论】：

你的第一个回报是什么？看起来代码需要一些帮助...

标签： reactjs async-await axios use-state

【解决方案1】：

您无需从 tenDrinks 函数返回值，因为您正在设置返回 api 数据时的状态。

只需在渲染中获取 randomDrinks 的值，每次状态更改都会像这样更新

{ randomDrinks.map((drink) => (
        <div key={drink.idDrink}>{drink.strDrink}</div>
    )) 
}

你的完整代码看起来像这样

const Home = () => {
    const [randomDrinks, setRandomDrinks] = useState([]);

    const tenDrinks = async () => {
      const config = {
         ...
      } ;

      await axios(config)
        .then((res) => setRandomDrinks(res.data.drinks)) // This updates the value of randomDrinks
        .catch(console.error); 
    };

    const onClick = () => {
      tenDrinks();
    };

    return (
      <div>
        <button onClick={onClick}>Get 10 random cocktails</button>
        {/** This will always rendered the current state value of randomDrinks */}
        { randomDrinks.map((drink) => (
            <div key={drink.idDrink}>{drink.strDrink}</div>
        )) }
      </div>
    );
};

【讨论】：