react中的state值修改了，也触发了页面的重新渲染，但是视图没有更新，可能是什么原因？

state更新的是一个值List,但是页面渲染使用的是List中的某一项（当前选中项curItem），也定义成了state，
而更新状态时，只更新了List,忽视了当前选中项curItem的状态更新，导致视图没有更新，
即使组件重新渲染了，但是视图中使用的是curItem

解决方案：state中不要保存当前选中项curItem，而应该保存当前选中项的唯一标识
根据唯一标识，在渲染过程中计算当前选中项

当React中的state值修改后，理论上应该触发组件的重新渲染，进而更新视图。如果你遇到视图没有更新的情况，可能是以下几个原因造成的：

ShouldComponentUpdate 或 PureComponent 阻止了不必要的渲染：
如果你的组件是类组件，并且实现了shouldComponentUpdate方法，确保它正确地返回true以允许在state变化时重新渲染。如果是函数组件，且使用了React.memo，也要检查 memo 的比较函数是否正确地识别出props的变化。
State 更新未实际发生：
确保你是在使用正确的setState方式更新状态。例如，对于函数组件，你应该使用setSomeState(newState)而不是直接修改someState。
如果是对象或数组，请确保是创建了一个新的引用（例如，使用扩展运算符...或Array.prototype.map）。
JSX 渲染逻辑问题：
检查你的JSX模板代码，确保根据最新的state正确地生成了预期的DOM结构。有时候逻辑错误或条件渲染可能导致某些部分没有按照预期显示。
组件纯净性问题：
确保组件内部没有外部因素（如全局变量、未控制的props）影响其渲染结果，保持组件的纯净性。
DOM 更新被外部库干扰：
如果你使用了第三方库来操作DOM，确保它们没有以某种方式阻止或覆盖了React的更新。
React DevTools问题：
有时候，React DevTools可能会给人一种视图未更新的错觉。尝试禁用DevTools或在无DevTools环境下查看应用。
强制更新：
作为调试手段，你也可以尝试使用useState的setter函数的回调形式或在类组件中使用this.forceUpdate()来强制组件重新渲染，但这通常不是解决生产问题的推荐方法。

如果以上都没有解决问题，建议使用console.log或调试工具仔细检查state更新的流程和渲染时机，确认state的确改变了且组件也重新渲染了，但视图为何没有改变。
此外，查看浏览器的开发者工具中的元素检查器，确认DOM结构是否符合预期，也是排查此类问题的有效手段。

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18178956.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！