如何避免最大更新深度超过Reactjs
我尝试使用下面的代码在reactjs应用程序中显示一些csv内容。当我单击按钮时，它应该调用api并获得响应。我需要以表格的形式显示响应，而当我提交时，我需要保存数据。获取响应和保存对我来说很好，但我的问题是，当我单击侧菜单来获取所选数据时，我的状态没有正确更新以显示所选值数据，我需要单击三次以上。所以我试着用它的依赖，它的唤醒很好。但它的显示记忆问题。我是新的反应，我尝试了许多方式，它显示出最大的超越错误。那么如何在下面的代码中修复它
const Parameters = ({ selectedtestcaseId, hideTestTab }) => {
const [csvattachment, setcsvattachment] = useState({})
const [slectedattachementId, setslectedattachementId] = useState()
const [viewcsv, setviewcsv] = useState()
const [csvHead, setcsvHead] = useState([])
const [csvformFields, setcsvformFields] = useState([{}])
const [formatData, setformatData] = useState([])
const formatCsv = () => {
console.log(csvHead)
if (viewcsv) {
let splitVlaues = viewcsv?.split('\r\n')
setcsvHead(splitVlaues[0]?.split(','))
let allData = []
for (let i = 1; i < splitVlaues.length - 1; i++) {
let a = splitVlaues[i].split('"');
let filteredValue = a.filter(x => x && x != ',');
allData.push(filteredValue)
}
setformatData(allData)
var newval = formatData.map(val => {
return val.reduce((result, field, index) => {
result[csvHead[index]] = field;
return result;
}, {})
})
setcsvformFields(newval)
}
}
useEffect(() => {
formatCsv()
}, [csvformFields])
return (
<table className="table table-striped table-bordered parameter-display">
<thead>
<tr>
{csvHead.map((val, i) => <td key={i}>{val}</td>)}
</tr>
</thead>
<tbody>
<>
{csvformFields?.map((d, index) => (
<tr>
{Object.keys(d).map(prop => (
<>
<td><input type="text" name={prop} value={d[prop]} onChange={(e) => handleFormChange(index, e)} /></td>
</>
))}
</tr>
))}
</>
</tbody>
</table>
)
}My in input is
in variable "viewcsv" ie const [viewcsv, setviewcsv] = useState()
/
criteriass,criteriaCountry,criteriaCountryState
"5G,NewZealand","5G,New Zealand ","5G,New Zealand "
"5G,NewZealand","5G,New Zealand ","5G,New Zealand "
"5G,NewZealand","5G,New Zealand ","5G,New Zealand "
/
2) const [csvHead, setcsvHead] = useState([])
csvHead hold ['criteriass','criteriaCountry']
3) const [formatData, setformatData] = useState([])
formatData and allData hold
[
[
"5G,NewZealand",
"5G,New Zealand "
]
]
4) const [csvformFields, setcsvformFields] = useState([{}])
csvformFields and newval hold
[
{
"criteriass": "5G,NewZealand",
"criteriaCountry": "5G,New Zealand "
}
]
My issue is after i try to use csvformFields in my html its not loading
after use useEffeect with csvformFields as dependency its working. but throwing infinite loop.
How to fix the above. How to make state change reflect immeditaly我试着用csvformFields调用“useEffect”它的最大超错误，同时我尝试使用"csvHead“变量仍然保持不变。如何修复上述代码中的最大值超出错误。在我犯错误的地方。我需要在useEffect中添加哪个变量作为依赖数组，为什么？？
下面是我正在犯的错误
*
超过最大更新深度。这可能发生在组件在useEffect中调用useEffect时，但是useEffect要么没有依赖数组，要么在每个呈现上更改依赖项之一。
*
回答 1
Stack Overflow用户
发布于 2022-06-29 06:32:54
问题来自于您的useEffect
useEffect(() => {
formatCsv()
}, [csvformFields])在这里，每当formatCsv的值发生变化时，就调用一个名为csvformFields的函数。在formatCsv函数中调用更改csvformFields值的setcsvformFields。它创建了一个无限循环：
useEffect调用formatCsv -> formatCsv更改csvformFields值-> useEffect依赖数组trigers，并调用formatCsv函数-> formatCsv更改csvformFields值->等等。
修复方法是修复依赖数组或useEffect。formatCsv只依赖于3个值-- viewcsv、formatData和csvHead。它们定义了csvformFields值。因此，依赖数组应该设置为那些-而不是csvformFields。
useEffect(() => {
formatCsv()
}, [viewcsv, formatData, csvHead])但这并不能解决这个问题，因为无限循环仍将持续存在。究其原因是formatCsv函数的缺陷。在内部，您有用于setformatData和setcsvHead状态的setcsvHead函数。为什么？我一点线索都没有。
设置一个状态，然后在函数中尝试获取最新的值？那不管用。一旦函数被执行，函数周期内的状态值将保持不变，不管你改变了多少。所以把它们变成一个变量。
总的来说，您需要重构整个流程。代码乱七八糟-没有适当的格式，剂量遵循标准的程序名称等。+你严重依赖于许多不同的状态，这是荒谬的。
问题在于设置了错误的useEffect依赖关系，有太多的状态和糟糕的formatCsv函数设计。
https://stackoverflow.com/questions/72796162
复制相似问题
腾讯云开发者
