Question

我正在尝试使用钩子，但是处于无限循环中。代码如下。 fetchSomeData和uuid从父组件传递进来。每次获取的数据都是相同的。谢谢。

import React, { useState } from 'react';

const MyComponent = (props) => {
  const [myList, setMyList] = useState([]);

  const {fetchSomeData, uuid} = props;

  fetchSomeData(uuid)
    .then( (response) => {
      setMyList(response.payload.data.activities);
  })

  const renderItem = (item)=>{
    return (<div>{item.title}</div>)
  }

  return (
    <div> My COmponent 
      <div>
        {myList.map (renderItem)}
      </div>      
    </div>      
  )
}

export default MyComponent

Answer 1

因为您正在每个渲染上执行fetcher函数，更新状态并触发一个新的渲染，所以它将再次获取数据，依此类推...

使用useEffect

来包装命令性代码

useEffect(() =>{
    fetchSomeData(uuid)
        .then( (response) => {
            setMyList(response.payload.data.activities);
    })
},[uuid])

现在，您只在uuid发生更改时获取

使用挂钩获取数据时的无限循环

1 个答案: