Javascript React筛选大型数据集而不重新渲染（太多重新渲染错误）

我有一个非常大的对象数组，从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)
    }
  }
}

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

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）

会导致react错误

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

render (
  <div>
  { filteredStudents ?
    filteredStudents.map((student, index) => {
      <div key={index}>
        student.name
      </div>
    } : null
  }
  </div>
)

渲染(
{筛选学生？
filteredStudents.map（（学生，索引）=>{
学生姓名
}：null
}
)

发生这种情况是因为您正在呼叫

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'）

。

问题在于条件：

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

---

删除了它，它似乎正在工作。现在我只需要一种更好的方式来呈现数据，因为大约有5000个琥珀色对象

我们需要该

getFilteredStudents

函数的上下文。它在哪里调用？几乎可以肯定，您正在修改useEffect挂钩中触发无限渲染的某些内容，但是您没有发布足够的内容让我们说。我已经更新了原始帖子。我有一个条件，如果CSV已经完成了parsing，我将调用

getFilteredStudents（）

方法。在您发布此内容时，我已经从字面上理解了这一点。您的解释非常有用。谢谢