如何使用useEffect和for循环生成多个JSX元素

Question

我想使用useEffect和for-loop生成多个JSX元素，但在本例中没有呈现任何内容。

警告代码：“React Hook useEffect缺少依赖项：”Render InfoCard“。请包含它或删除依赖项数组React-Hooks/EXEXTIVE-DEPS”

import React, { useState, useEffect } from 'react';
import InfoCard from '../components/InfoCard.jsx';
import { getScenicSpotRequest } from '../request test.js';

function MainScreen() {

  const [renderInfoCard, setRenderInfoCard] = useState(null);
  const [renderInfoCardArray, setRenderInfoCardArray] = useState([]);

  useEffect(() => {
    //data recieve from axios request
    getScenicSpotRequest().then(result => {
    //want to use useEffect and for loop to generate multiple JSX elements 
      for (let i = 0; i < result.length; i++) {
        setRenderInfoCard(<InfoCard Name={result[i].Name} Description={result[i].Description} Picture={result[i].Picture.PictureUrl1} />);
        setRenderInfoCardArray[i] += renderInfoCard;
      }
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <Navbar NavbarTitle="ScenicSpot" />
        {renderInfoCardArray}
      </header>
    </div>
  );
}

export default MainScreen;

Answer 1

不要使用状态来存储元素，使用状态来存储请求值，然后map通过这些值来呈现

import React, { useState, useEffect } from 'react';
import InfoCard from '../components/InfoCard.jsx';
import { getScenicSpotRequest } from '../request test.js';

function MainScreen() {

  const [infoCards, setInfoCards] = useState();

  useEffect(() => {
    //data recieve from axios request
    getScenicSpotRequest().then(setInfoCards);
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <Navbar NavbarTitle="ScenicSpot" />
        {infoCards.map(infoCard => (<InfoCard Name={infoCard.Name} Description={infoCard.Description} Picture={infoCard.Picture.PictureUrl1} />))}
      </header>
    </div>
  );
}

export default MainScreen;

Answer 2

我不会将组件放在状态中（您也真的不应该改变状态）。相反，等待所有结果返回，然后用所有结果一次设置状态。当返回JSX时，您可以通过映射结果（如果存在的话）来创建组件。

function MainScreen() {
  const [sceneResults, setSceneResults] = useState([]);
  useEffect(() => {
    getScenicSpotRequest()
      .then(setSceneResults);
      // .catch(handleErrors); // don't forget this - don't want unhandled rejections
  }, [setSceneResults]); // this will not change, so it's safe to put in the dependency array
  return (
    <div className="App">
      <header className="App-header">
        <Navbar NavbarTitle="ScenicSpot" />
        {sceneResults.map(result => (
          <InfoCard Name={result.Name} Description={result.Description} Picture={result.Picture.PictureUrl1} />)
        )}
      </header>
    </div>
  );
}

我将setsceneResults放入effect依赖项数组以满足linter，但这没关系，对状态setter的引用是稳定的，因此它只在mount上运行。