usestate可以更改useEffect中axios之后的状态值

xj3cbfub  于 2022-11-05  发布在  iOS
关注(0)|答案(2)|浏览(231)

我希望得到的网址与类别=业务,但网络自动重置我的状态到网址,没有发送的类别。我不知道背后的原因

  1. let {id}=useParams()
  2. const [newsurl,setNewsurl]=useState(()=>{
  3. const initialstate="https://newsapi.org/v2/top-headlines?country=us&apiKey=c75d8c8ba2f1470bb24817af1ed669ee"
  4. return initialstate;})
  5. //console.log(id);
  6. const [articles, setActicles] = useState([]);
  7. useEffect( ()=>{
  8. if(id === 2)
  9. console.log("condition")
  10. setNewsurl("https://newsapi.org/v2/top-headlines?country=de&category=business&apiKey=c75d8c8ba2f1470bb24817af1ed669ee")},[])
  11. useEffect(() => {
  12. const getArticles = async () => {
  13. const res = await Axios.get(newsurl);
  14. setActicles(res.data.articles);
  15. console.log(res);
  16. };
  17. getArticles();
  18. }, []);
  19. useEffect(() => {
  20. console.log(newsurl)
  21. // Whatever else we want to do after the state ha
  22. s been updated.
  23. }, [newsurl])
  24. //return "https://newsapi.org/v2/top-headlines?country=us&apiKey=c75d8c8ba2f1470bb24817af1ed669ee";}
  25. return (<><Newsnavbar />{articles?.map(({title,description,url,urlToImage,publishedAt,source})=>(
  26. <NewsItem
  27. title={title}
  28. desciption={description}
  29. url={url}
  30. urlToImage={urlToImage}
  31. publishedAt={publishedAt}
  32. source={source.name} />
  33. )) } </>
  34. )

还有一件事是,当我保存代码的网页将更改为有类别,但当我刷新它,它更改回初始状态。同样的情况下,当键入的网址没有id。我可以知道如何解决这个问题和背后的原因吗?

mbyulnm0

mbyulnm01#

在React中设置状态的作用类似于异步函数。
这意味着,当您设置状态并将console.log放在它后面时,它可能会在状态实际完成更新之前运行。
例如,您可以改为使用依赖于相关状态的useEffect挂钩,以查看状态值是否按预期得到更新。

范例:

  1. useEffect(() => {
  2. console.log(newsurl)
  3. // Whatever else we want to do after the state has been updated.
  4. }, [newsurl])

console.log将仅在状态完成更改并发生呈现后运行。

  • 注意:示例中的“newsurl”可以与您正在处理的任何其他状态片互换。

请查看documentation以了解有关此问题的更多信息。

展开查看全部
qyswt5oh

qyswt5oh2#

setState是一个异步操作,所以在第一次渲染中,当你的url等于你传递给useState钩子的默认值时,你的两个useEffetc都运行。在下一次渲染中,你的url被更改,但是第二个useEffect不再运行,因为你传递了一个空数组作为它的依赖项,所以它只运行一次。您可以像下面的代码片段那样重写代码来解决问题。

  1. const [articles, setActicles] = useState([]);
  2. const Id = props.id;
  3. useEffect(() => {
  4. const getArticles = async () => {
  5. const newsurl =
  6. Id === 2
  7. ? "https://newsapi.org/v2/top-headlines?country=de&category=business&apiKey=c75d8c8ba2f1470bb24817af1ed669ee"
  8. : "https://newsapi.org/v2/top-headlines?country=us&apiKey=c75d8c8ba2f1470bb24817af1ed669ee";
  9. const res = await Axios.get(newsurl);
  10. setActicles(res.data.articles);
  11. console.log(res);
  12. };
  13. getArticles();
  14. }, []);
展开查看全部

相关问题