在不重新渲染的情况下反应过滤大型数据集（重新渲染错误太多）

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 对象

在不重新渲染的情况下反应过滤大型数据集（重新渲染错误太多）

React filter large dataset without re-render (Too many re-renders error)

javascript

reactjs

papaparse