延迟的onClick响应React App仅适用于第二次点击，但不适用于第一次点击

如何解决延迟的onClick响应React App仅适用于第二次点击，但不适用于第一次点击

因此，我将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

解决方法

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

只需在渲染器中获取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>
    );
};