通过对象数组排序和 setState 导致无限循环

Question

我是 API 的新手，我正在尝试对从“Pexels”API 获取的值进行排序和存储。我正在使用 React.js.

制作图片库作为练习

制作对象数组后，我将值作为道具传递到组件中。我使用 forEach 循环并在其中设置状态...但这会导致无限循环，我不确定为什么或解决方法是什么！

App 级代码如下所示：

function App() {
  const [test, setTest] = useState([
    {name:"James", age: 25, hairColor: "Lavender"},
    {name:"Jessie", age: 30, hairColor: "Maroon"},
    {name:"Meowth", age: 1, hairColor: "beige"}
  ]);

 return (   
  <div className="container">
    <Header 
      picUrl={headerInfo.imgUrl}
      posterName={headerInfo.name}
    />
    <NavBar />
    <Galary 
      testInfo={test}
    />      
  </div>
 );
}

组件级别：

import {useState, useEffect} from 'react';
const Gallary = ( {testInfo} ) => {

  const [name, setName] = useState([]);
  const dataSort = async ()=>{

    // Below is what causes the error!
    await testInfo.forEach( test =>{
       setName([...name, test.name]); // this causes  an infinite loop!
       console.log(test.name); // this iterates 3 times if not setting the state!
    });
  };

  return (
    <div className="gallary-section">
        <h2>{ title }</h2>
        <div className="gallary">
            <GalImg
                profileImg={profileImg > 0 ? profileImg : profImg}
                name={name > 0 ? name : posterName}
                picUrl={picUrl > 0 ? picUrl : imgUrl}
                dlLink={dlLink > 0 ? dlLink : dlL}
            />
        </div>

        <Button bgColor="#7E4DD2" txtColor="#fff"  btnText="More" />
    </div>
  )
}

Gallary.defaultProps = {
  title: "Today's selection",
  profImg: "https://images.pexels.com/users/avatars/92810756/brian-lazo-240.jpeg?auto=compress&fit=crop&h=256&w=256",
  posterName: "Brian Lazo",
  imgUrl: "https://images.pexels.com/photos/9160984/pexels-photo-9160984.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260",
  dlL: "https://www.pexels.com/photo/9160984/download/?search_query=&tracking_id=so1xqtw586"
}

如有任何帮助，我们将不胜感激！

Answer 1

那里不需要 async/await，并使用 .map 带回一个新数组，然后使用该新数组设置你的状态变量（应该称为 names 和setNames)

  useEffect(() => {
     let newNames = testInfo.map(test => test.name);
     setName(newNames)
},[testInfo]

或者从一开始就设置它，请注意如何将 testInfo 引入此组件。

  const [name, setName] = useState(() => testInfo.map(test => test.name));

通过对象数组排序和 setState 导致无限循环

sorting through array of objects and setState cause infinite loop

infinite-loop

reactjs