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) {

  getFilteredStudents('Amber')

}

每次组件渲染时，都会触发一个新的=> getFilteredStudents，它会=> setFilteredStudents，从而导致新的重新渲染和无限循环

你应该这样做

const grabData = () => {

  readRemoteFile('my-data.csv', {

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

      setStudentData(results.data);

    }

  }

}

只需按getFilteredStudents('Amber')一下按钮即可呼叫..

Answer 2

问题是有条件的：

if (!loading) { 
     getFilteredStudents('Amber')
}

删除它，它似乎可以工作。现在我只需要一种更好的方式来渲染数据，因为大约有 5000 个 Amber 对象