React 中的无限循环

Question

function QuestionAns(){
    const url = 'http://127.0.0.1:8000/'
    const [data, setData] = useState([]);
    const [currData, setCurrData] = useState([])
    let i = 1

    useEffect(() => {
        let result = []
        const fetchFromUrl = async() => {
            const response = await axios.get(url)
            const response_data = await response.data.data
            await setData(response_data)
        }

        fetchFromUrl()
    }, [])

    const run_loop = async ()=>{
        let arr = []

        for(let counter = 0; counter < 12; counter++){
            arr.push(<Pretty count={i} question={data[i].question} answer_option={data[i].option_arr} answer={data[i].answer} key={data[i]._id} corr_ans={data[i]._id}/>)
            i+=1
        }

        let dat = await arr.concat(currData)
        await setCurrData(dat)
    }

    if(data.length){
        run_loop()
    }

    return (
        <div className="container my-3">
            <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-5">
                {data.length ? currData : `loading`}
            </div>
        </div>
    )
}

export default QuestionAns;

在这个 function fetchFromUrl 中，我们再次从存储在数据 state 中的服务器获取数据，我从获取的内容中获取 12 个数据并将其存储到 currData。 目的是做一个无限滚动。 但是如果我保持这样的代码，我会得到无限的 12 个数据条目意味着 1 到 12 -> 1 到 12 -> 1 到 12.....。 问题在于 currData。

知道为什么我会进入这个无限循环。 我擅长使用原始 js 并且可以轻松地做到这一点，但我现在正在学习反应，所以任何帮助都会得到帮助。

我期待 1-12 的数据将加载一次。

Answer 1

if(data.length){
    run_loop()
}

这种condition在运行useEffect之前期望第一次渲染总是true的，但是一旦执行了fetchFromUrl() data.length就永远为true ，因为在这个function中你正在更新 useState 钩子

setData(response_data)

if(data.length)如果data.length > 0则返回true ，除非response.data.data是一个空array ，否则情况总是如此

发生什么之后？ run_loop()执行并更新currData

setCurrData(dat)

这将重新渲染组件，因为if(data.length)始终为true ，这将无限发生。

所以我猜你得到的是无限渲染而不是无限循环。 尝试从您的jsx内部访问console.log以确保

return (
  <div className="container my-3">
  {console.log('this is a new render')}
     <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-5">
       {data.length ? currData : `loading`}
     </div>
   </div>
)

你应该做的是使run_loop()成为fetchFromUrl的一部分，以便它在useEffect中运行我不明白，但这就是你的代码正在做的if(data.legth){run_loop()}

    useEffect(() => {
        let result = [];
        let arr = []
        const fetchFromUrl = async() => {
            const response = await axios.get(url)
            const response_data = response.data.data
            setData(response_data)
            if(response_data.length > 11){ // this is better
              for(let counter = 0; counter < 12; counter++){
                arr.push(<Pretty count={i} question={response_data[i].question} answer_option={response_data[i].option_arr} answer={response_data[i].answer} key={response_data[i]._id} corr_ans={response_data[i]._id}/>)
                i+=1
                }
              let dat = arr.concat(currData)
              setCurrData(prevState => {
              if(prevState.length === dat.length) {return prevState} else {return dat} // this will avoid the infinite render
              })
            }
        }
        fetchFromUrl()
    }, [])

另请注意：您仅在这一行中需要await键

const response = await axios.get(url)