React过滤大数据集而不重新渲染（太多重新渲染错误）

Question

我有一个非常大的对象数组，从 CSV 解析（PapaParse）：

import { readRemoteFile } from 'react-papaparse'    

const [studentData, setStudentData] = useState(null)

const [filteredStudents, setFilteredStudents] = useState([])

const [loading, setLoading] = useState(true)   

useEffect(() => { 

  grabData()

}, [])    

const grabData = () => {

  readRemoteFile('my-data.csv', {

    complete: (results) => { // this method gets called once file is finished parsing

      setStudentData(results.data)

      setLoading(false)

    }

  }

}

我想过滤学生数据，只显示名为“Amber”的学生，例如：

const getFilteredStudents = (name) => {

  let updatedStudents = studentData.filter((student) => {

    return student.name === name

  }

  setFilteredStudents(updatedStudents)

  // Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

}

if (!loading) {

  getFilteredStudents('Amber')

}

在上面的代码块中，调用setFilteredStudents(updatedStudents)会导致反应错误。

最后我只想渲染组件中过滤后的学生：

render (

  <div>

  { filteredStudents ?

    filteredStudents.map((student, index) => {

      <div key={index}>

        student.name

      </div>

    } : null

  }

  </div>

)

Answer 1

发生这种情况是因为您正在打电话if (!loading) {&nbsp; getFilteredStudents('Amber')}每次组件渲染时，都会触发一个新的=> getFilteredStudents，它会=> setFilteredStudents，从而导致新的重新渲染和无限循环你应该这样做const grabData = () => {&nbsp; readRemoteFile('my-data.csv', {&nbsp; &nbsp; complete: (results) => { // this method gets called once file is finished parsing&nbsp; &nbsp; &nbsp; setStudentData(results.data);&nbsp; &nbsp; }&nbsp; }}只需按getFilteredStudents('Amber')一下按钮即可呼叫..

Answer 2

问题是有条件的：if&nbsp;(!loading)&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getFilteredStudents('Amber') }删除它，它似乎可以工作。现在我只需要一种更好的方式来渲染数据，因为大约有 5000 个 Amber 对象