如何在 useEffect 中使用 setState(array)

Question

我想做这个过程

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)"
  }
]

2. 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>

3. 我在 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 发生变化时，再次做出反应。 在这种情况下，解决方案是什么，我对渲染的理解是否正确？

Answer 1

我不明白你为什么使用 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);
  }

Answer 2

您不需要使用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>