React hooks：父组件不重新渲染

Question

我正在尝试使用回调从子组件更新父组件的状态。状态和回调被传递给文本输入。正在调用回调，父级的状态已更改，但不会重新渲染。输入字段的值保持不变。如果使用强制渲染，则每次添加新字符时文本字段都会更新（根据需要）。我不确定是什么导致了这种情况，根据我的理解，除非状态不变，否则提供的 setState 钩子应该重新渲染。

Answer 1

问题就在这里

const updateTitle = text => {

  let tempTitle = title; // These two variables are the same object

  tempTitle['text'] = text;

  setTitle(tempTitle); // problem is here

}

React 使用 object.is() 方法来比较前后的两个值。看这个

Object.is(title, tempTitle) // true

你应该像这样制作“title”和“tempTitle”不同的对象

const updateTitle = text => {

  let tempTitle = {...title}; // tempTitle is a new object

  tempTitle['text'] = text;

  setTitle(tempTitle);

}

这是可变对象的演示。

var a= {name:1}

var b = a;

b.name=2

var result = Object.is(a,b)

console.log(result)

// true