如果 UseEffect() 不能在 React.js 的回调中使用，我该如何停止无限渲染循环？

Question

这里的前端学生正在尝试弄清楚 React... 我似乎无法理解 React 上的这些钩子。我正在尝试在 setArray() 中设置状态。这会导致渲染中的无限循环。 React 不允许我使用 useEffect() 进行回调。我似乎无法弄清楚如何解决这个问题。如何将我新构造的数组传递给状态？

   const [yearsArray, setYearsArrayState] = useState([]);    

    timelineData.then((data) => {
                let yearsArrays = [];
                for (let item of data.timelineInfo) {
                    yearsArrays.push(item.year);
                }
                setArray(yearsArrays);
            });

            const setArray = (array) => {
                const passArray = new Set(array);
                const oneOfEachYear = [...passArray];
                setYearsArrayState(oneOfEachYear);
            };
        return (<div>
        {yearsArray.map((item) => (
                                <button
                                    className={style.buttonYear}
                                    onClick={() => {
                                        toggle();
                                        setClickedYear(item);
                                        console.log(clickedYear);
                                    }}  >
                        </button>
         </div>);

Answer 1

您将 timelineData 放入组件挂载钩子中

// This effect hook will be executed only once at the component mount
useEffect(() => {
  timelineData.then((data) => {
    let newYearsArrays = [];
     for (let item of data.timelineInfo) {
       newYearsArrays.push(item.year);
     }
     setArray(newYearsArrays);
  });
}, []);

如果 UseEffect() 不能在 React.js 的回调中使用，我该如何停止无限渲染循环？

How can I stop an infinite render loop if UseEffect() cannot be used in callback in React.js?

setstate

reactjs

react-hooks

use-effect