React 之 state 数据改变页面不更新未重新渲染的 7 种情况及解决办法_state更新页面没有重新加载_喜樂的CC的博客

1. 组件render渲染了一个对象数组, 当state已确定更新但视图未更新

// 错误方式
const obj = this.state.obj;
obj.forEach((e) => {
        xxxxx //省略的代码是改变了对象的值
this.setState({
解决办法: 克隆 
// 正确方式
const obj = Object.JSON(Object.stringify(this.state.obj));
obj.forEach((e) => {
        xxxxx //省略的代码是改变了对象的值
this.setState({
原因: 对象数组是引用方式 ,对于react来说它的值都是地址(涉及到tree diff)，因为没有被重新赋值(地址没有改变)，所以 react 会认为仍然是之前的元素(element)，则不更新视图。 
react更新state后视图没有变化 
react学习笔记-解决react修改state对象，页面不刷新问题 
2. 组件render渲染了一个列表, 当state改变视图更新异常 
{this.state.string.split('').map((item,index)=><p key={index}>item</p>)}
//其中this.state.string = '1' 且每秒钟 +1 ,此时页面视图未发生变化 
解决办法: key={index}改成key={item+index}。 
原因: key是唯一的. 而1和10在split后是[1]和[1,0],他们都共有1, 这时候就会导致组件状态问题。 
 react列表渲染时为什么尽量不要把索引设置为key值 
3. A和B子组件共用一个父组件state, 此时点击子组件A按钮更新了父组件state, 但是子组件B视图不更新 
解决办法: 同上(2)。 
原因: 同一个页面调用同的组件(出现问题的组件)的key都用了index, 也会导致组件状态问题。 
4. 父子组件同时初始化, 子组件接收的值来自父组件异步获取的数据 
初始化 state.value=' ', 
componentDidMount时, 父组件异步获取数据赋给state.value, 
而子组件一同初始化componentDidMount中拿到的state.value还是空的。 
解决办法: 
// render中判断state.value不等于空,再加载子组件即可
render() {
    return (
        { this.state.value? <subComp value={this.state.value}>我是子组件</subComp> : '' }      
原因: 因为子组件已经componentDidMount渲染完成了, 父组件异步获取数据就没办法拿到。 
*拓展:  貌似componentWillReceiveProps是符合需求的, 但是我用过几次有出现问题搞不定需求就没再用了。 
5. 调用方法中state更新了, 但实时拿到的值还是旧的 
//默认string等于''
this.setState({
    string: '123'
console.log(this.state.string)//'' 
解决办法: 
this.setState({
    string: '123'
},()=>{
    //setState后的回调
    console.log(this.state.string)//'123'
 原因: react还没更新state, 打印就执行完毕了。 
6. 在redux中修改state页面未更新 
解决办法:  请检查你的state是不是直接改变原state的, 记住不要直接修改state。 
原因:  reducer 中 state 是引用, 在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变，就不会重新渲染页面。 
react State改变，页面却没有改变 
state 更新了，组件却没有更新 
7.当列表循环渲染之后,触发事件改变事件对应的值, 视图不更新 
还有一种情况是如下, 直接改变源数据发现是没有变化的, 只有触发视图重排才会有效果 
obj.map(item=>{
    <span onClick={()=>{item.name=1}}>{item.name}<span>
对象内的数据没有做监听 
解决办法: 
想办法触发视图重排, 重排方法很多; 我暂时能想到的是添加一个node节点, 再删除;如果你有其他好办法好想法可以留言一起学习讨论! 
本人开发的微信小程序（已上线）:
 有兴趣的可以看看, 可一键三连点点关注谢谢大家~
 1、小绿抑郁测试助手（微信小程序）：一个完全免费无广告的抑郁症自测小程序, 收集了来自全球权威的问卷免费提供给大家使用.有新颖的的分数记录和海报分享, 可看可学! 
                    1. 在redux中修改state页面未更新解决办法: 请检查你的state是不是直接改变原state的, 记住不要直接修改state原因: reducer 中 state 是引用,在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变，就不会重新渲染页...
				在react中通过 state 以及 setState() 来控制组件的状态。
state
state 是 react 中用来存储组件数据状态的，可以类比成 vue 中的 data。
1.state的作用
state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.
React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化.
2.state工作原理
常用的通知React数据变化的方法是调用setState(data,callback).这个方
				在开发React组件的过程中，我们经常会遇到这个问题：什么情况下组件会重新渲染？
当内部data发生改变，state发生改变(通过调用this.setState()) 以及父组件传过来的props发生改变时，会导致组件重新渲染。
以下几个问题同样值得我们思考：
setState()函数在任何情况下都会导致组件重渲染吗？如果setState中的state没有发生改变呢？
如果state和从父组件传过来的props都没变化，那他就一定不会发生重渲染吗？
首先，我们来解决这两个问题
没有导致state的值发生变化的this.setState(）是否会导致重渲染  — 会
import React
				组件的重新渲染
我们可以在 React 组件中的 props 和 state 存放任何类型的数据，通过改变 props 和 state，去控制整个组件的状态。当 props 和 state 发生变化时，React 会重新渲染整个组件，组件重新渲染的过程可简化如下图：
译者之前对diff的理解是，对于一个改变 props 的组件，diff能自动计算出组件内部DOM树的不同，然后经过对比，找出真正变化的DOM节点，对变化部分进行渲染。这个是错误的理解，diff算法只是用来计算出改变状态或 props的组件/虚拟节点，而这个组件/虚拟节点，无论多大，它都会重新渲染。 
假设有一个渲染完成的组件，
				今天写实验室的react项目，其中一个state为数组（看到state为数组就要小心，有很多坑！！！）
对数组进行操作之后，页面竟然不刷新。反复折腾之后，精简成了以下代码：
import React, { Component } from 'react'
import { Table, Tag, Space } from 'antd';
import "./App.css"
export default class App extends Component {
  state={
0.1012021.01.21 11:29:47字数 151阅读 2,864
页面通过render渲染，通过setState改变数据但是页面并未改变。（记录）
const obj = this.state.obj;
obj.forEach((e) =>{
    改变了对象的值
this.setState({
此时页面并未改变
解决方法：浅拷贝方式获取对象并修改再赋值。
const obj = [...thi...
				今天使用React完成一个小案例，使用react把数据渲染到页面，效果如下
首先，既然要是要使用react遍历对象吗，那我们就得引入react的相关插件引入，并且把我们要渲染到页面的data.js数据也引进来。data文件在分享里面有，可以去下载。
   <script src="./js/react.development.js"></script>
				问题描述：经常会看到这样一个问题，明明已经调用setState的方法了，但是state的值不改变，或者是数据改变了，但是没有重新渲染。找到了几个解决办法，记录一下。思路一、可能是setState(value)中的value值的引用地址与state的一样
就比如最常用遇到的，对象或者数组的更新操作可能失败(最常遇到) 	可能是这样的:**
[…b]这是一个新的数组，然后扩展b数组的元素到新数组，引用地址已经不一样了
所以总结：善用…扩展运算符思路二、可能调用这个set方法的onClick点击事件，被父元素的
				文章目录问题描述解决办法案例说明
做一个消息评论列表，针对具体某一个消息，里面有“收藏”和“点赞”功能，但是发现直接修改对象的树形，无法改变视图，因此做了笔记，方便后续学习
循环遍历所有的对象，然后修改对应的值，重新设置 数组对象
import * as React from 'react';
import {
    Icon,
    Button,
    In...
				在 React 中，接口返回的数据通常是在 componentDidMount 生命周期钩子中获取的。在这个钩子函数中，您可以执行异步请求，并在请求完成后设置状态。这样，当状态更新时，组件就会重新渲染。
以下是一个例子：
import React, { Component } from 'react';
class MyComponent extends Component {
  state = {
    data: null,
  componentDidMount() {
    // 获取数据
    fetch('https://my-api.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
  render() {
    const { data } = this.state;
    if (!data) {
      return <div>Loading...</div>;
    return (
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
export default MyComponent;
在上面的代码中，我们在 componentDidMount 中发送了一个异步请求，并在请求完成后设置了状态。如果 data 为空，则返回“Loading…”；否则，我们将数据呈现为列表。
                微信小程序云函数报错 errCode: -404011 cloud function execution error | errMsg: cloud.callFunction 的三种情况以及解决办法
                    感谢，我遇到的是第二个情况
                JavaScript复杂判断(if else / switch)的更优雅写法 优化冗余
                    m0_58058922: 
                    感谢大佬提供的思路，起码多重判断不会被组长逼逼赖赖了。
                [React Native]  VS Code 调用模拟器(虚拟机/仿真器)开发调试
                    m0_65360496: 
                    启动模拟器后,切换到工程目录下命令行检查模拟器进程不存在怎么解决呢
                树莓派4b MFRC522 RFID模块 读取NFC
                    A1984104981: