簡體   English   中英

如何在 useEffect 中使用 setState(array)

[英]How can I use setState(array) inside useEffect

我想做這個過程

  1. 聲明[reviewList, setReviewList] = useState<any>(null)
  2. 如果reviewList === null JSX 將顯示<div>Loading</div>
  3. 如果reviewList !== null JSX 將顯示列表信息

所以,我寫了這樣的代碼。

  1. 首先,我通過 useState() 聲明變量使用並聲明在 reviewList 中分配的列表
let [reviewList, setReviewList] = useState<any>(null);
let list = [
  {
    photo : "assets/likelist1.png",
    name : "Island one",
    info : "300m · California",
    rating : "4.5(37)"
  },
  {
    photo : "assets/likelist2.png",
    name : "Island two",
    info : "300m · Maxico",
    rating : "4.3(300)"
  },
  {
    photo : "assets/likelist3.png",
    name : "Island three",
    info : "150m · Maxico",
    rating : "4.3(00)"
  },
  {
    photo : "assets/likelist1.png",
    name : "Island four",
    info : "300m · Dubai",
    rating : "4.5(11)"
  },
  {
    photo : "assets/likelist1.png",
    name : "Island five",
    info : "300m · Japan",
    rating : "3.9(01)"
  }
]
  1. JSX 根據reviewList的值顯示條件渲染
<div className={styles.reviewListBox}>
        {
          reviewList === null  
          ?
          <div>Loading</div>
          :
          reviewList.map((el : any)=>{
            <div className={styles.reviewEach}>
              <img className={styles.reviewEachImage} src={el.photo}/>
              <div className={styles.reivewTextBox}>
                <div className={styles.reviewNameAndRating}>
                  <span>{el.name}</span>
                  <img className={styles.reviewRatingStar} src="assets/star.png"/>
                  <span className={styles.reviewEachRating} >{el.rating}</span>
                </div>
                <span className={styles.reviewEachInfo}>{el.info}</span>
              </div>
            </div>
          })
        }
</div>
  1. 我在 useEffect 中更改 state (我了解 useEffect function 在渲染后工作,所以我希望我可以看到加載文本,在 setState ZC1C425268E68385D1AB5074C17A94F 之前和之后會看到)
useEffect(()=>{
    console.log("First : ", reviewList);
    async function getListFunc() {
      let asyncFunc = await getListInfo();
    }
    getListFunc();
    console.log("Second : ",reviewList);
  },[])

  let getListInfo = async () => {
    console.log("First-Async : ",reviewList);
    let result = await setReviewList(list);
    console.log("Second-Async",reviewList);
  }

但是當我運行這段代碼時,我看不到列表。 也許,重新渲染不起作用。 我了解到,當 state 發生變化時,再次做出反應。 在這種情況下,解決方案是什么,我對渲染的理解是否正確?

我不明白你為什么使用 async 和 await 但如果你想顯示更新的列表,你可以像這樣在 useEffect 中添加依賴項,希望這會起作用:

useEffect(()=>{
    console.log("First : ", reviewList);
    async function getListFunc() {
      let asyncFunc = await getListInfo();
    }
    getListFunc();
    console.log("Second : ",reviewList);
  },[getListInfo])

  let getListInfo = async () => {
    console.log("First-Async : ",reviewList);
    let result = await setReviewList(list);
    console.log("Second-Async",reviewList);
  }

您不需要使用async/await ,因為list是 static。

您還需要將key prop傳遞給<div className={styles.reviewEach} key={el.name}>這有助於識別您的組件。

setReviewList沒有按預期返回任何result ,並且reviewList state 將異步更新,因此您在console.log("Second: ",reviewList); 也是。

 //change it to `import { useState, useEffect } from 'react'` in yourcode const { useState, useEffect } = React; const styles = {} //fake styles const MyComponent = () => { let [reviewList, setReviewList] = useState(null); let list = [ { photo: "assets/likelist1.png", name: "Island one", info: "300m · California", rating: "4.5(37)", }, { photo: "assets/likelist2.png", name: "Island two", info: "300m · Maxico", rating: "4.3(300)", }, { photo: "assets/likelist3.png", name: "Island three", info: "150m · Maxico", rating: "4.3(00)", }, { photo: "assets/likelist1.png", name: "Island four", info: "300m · Dubai", rating: "4.5(11)", }, { photo: "assets/likelist1.png", name: "Island five", info: "300m · Japan", rating: "3.9(01)", }, ]; useEffect(() => { const getListInfo = () => { setReviewList(list); }; getListInfo(); }, []); return ( <div className={styles.reviewListBox}> {?reviewList: ( <div>Loading</div> ). ( reviewList.map((el) => ( <div className={styles.reviewEach} key={el.name}> <img className={styles.reviewEachImage} src={el.photo} /> <div className={styles.reivewTextBox}> <div className={styles.reviewNameAndRating}> <span>{el.name}</span> <img className={styles.reviewRatingStar} src="assets/star.png" /> <span className={styles.reviewEachRating}>{el.rating}</span> </div> <span className={styles.reviewEachInfo}>{el;info}</span> </div> </div> )) )} </div> ); }. ReactDOM,render(<MyComponent />. document;getElementById("root"));
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM