Reactjs 是React'的自动更新；她通常的行为是什么？

我认为上下文的作用方式与状态类似，所以我创建了函数

handleUpdate

，可以更新

state

，该函数将上下文用作值。之后，我注意到上下文正在更新，而没有触发

handleUpdate

提供者：

<DashboardContext.Provider value={{dashboard:this.state,handleChange:this.handleChange}}>
   {/*...*/}
</DashboardContext.Provider>

在另一个使用上下文的组件中：这会触发上下文的更新，而不调用

handleUpdate

let updatedTasks = this.context.dashboard.tasks;
updatedTasks[task.id] = {/* ... something */};

之后，它更改上下文值和父状态（即使用上下文），而不调用

setState

。这是正常的行为吗？我认为应该使用

setState

函数处理所有状态

作为在我使用的上下文对象上丢失引用的实际解决方法：

let updatedTasks = JSON.parse(JSON.stringify(this.context.dashboard.tasks));

但对我来说，这似乎不是一个正确的解决方案

编辑：as@Nicholas Tower建议的解决方案： 我当前的代码

构造函数中的状态现在如下所示：

this.state = {
  value: {
     dashboard: {
    // everything from state is now here
     },
     handleChange: this.handleChange,
  }
};

我现在传递state.value而不是自定义对象

<DashboardContext.Provider value={this.state.value}>
         {/*...*/}
</DashboardContext.Provider>

---

您遇到的问题在本部分：

value={{dashboard:this.state,handleChange:this.handleChange}}

每次组件渲染时（无论出于何种原因），这条线都将创建一个新对象。dashboard属性和handleChange属性可以保持不变，但它们周围的对象始终是新的。这就足够了，每次渲染时，值都会更改，因此所有使用该值的子体也需要重新渲染

您需要修改代码，以便此对象引用不会更改，除非您希望它更改。这通常是通过将对象置于组件的状态来完成的

class Example {
  handleChange = (what, value) => {
    this.setState(oldState => ({
      value: {
        ... oldState.value,
       [what]:value
      }
    });

  }

  state = {
    value: {
      dashboard: {
        // whatever you used to put in state now goes here
      },
      handleChange: this.handleChange
    }
  }

   render() {
     return (
       <DashboardContext.Provider value={this.state.value}>
         {/*...*/}
       </DashboardContext.Provider>
     )
   }
}

类示例{
handleChange=（什么，值）=>{
this.setState（oldState=>({
价值：{
…oldState.value，
[什么]：价值
}
});
}
状态={
价值：{
仪表板：{
//你以前在州里放的东西现在都放在这里了
},
这个，这个
}
}
render（）{
返回(
{/*...*/}
)
}
}

---

您可以在React关于上下文的文档中看到这一点：

这对我来说很有意义。但它仍在被引用。我已更改我的问题以向您显示我的当前代码。

handleChange

目前没有在任何地方被调用（测试时）。我注意到上下文一直在更改，但区别在于现在组件没有被重新呈现（刷新后我看到更改）。这是常见的行为吗？我想通过触发

handleChange

来提交这些更改。

value={{dashboard:this.state,handleChange:this.handleChange}}

class Example {
  handleChange = (what, value) => {
    this.setState(oldState => ({
      value: {
        ... oldState.value,
       [what]:value
      }
    });

  }

  state = {
    value: {
      dashboard: {
        // whatever you used to put in state now goes here
      },
      handleChange: this.handleChange
    }
  }

   render() {
     return (
       <DashboardContext.Provider value={this.state.value}>
         {/*...*/}
       </DashboardContext.Provider>
     )
   }
}