React State 仅在设置无用状态变量以及必要的状态变量时更新

Question

状态定义如下：

const [items, setItems] = useState([] as CartItemType[]);
const [id, setId] = useState<number | undefined>();

在这种情况下，id 完全没用。在我的应用中根本不需要它。

但是，如果我尝试更新 items，状态变量不会改变并且 UI 不会重新加载，除非我也会更新 id：

useEffect(() => console.log("reload")); // only fires if I include setId

const clickItem = (item: CartItemType) => {
  let tempItems = data;
  // @ts-ignore
  tempItems[item.id - 1].animation =
    "item animate__animated animate__zoomOut";
  setItems(tempItems!); // "!" to get rid of ts complaint about possible undefined value 
  setId(item.id); // nothing happens if I don't include this
};

// ... inside the return, in a map fn
<Item
  item={item}
  handleAddToCart={handleAddToCart}
  clickItem={clickItem}
/>

// inside Item component
<StyledItemWrapper
  className={item.animation}
  onClick={() => {
    clickItem(item); // item = an obj containing an id and an animation property
  }}
>

这里为什么需要setId？ setItems 不是在做什么？

Answer 1

原因是因为setState uses Object.is equality by default 会比较旧值和新值，而tempItems === items 即使在你改变了其中的一个对象之后也是如此。

如果您将 State Hook 更新为与当前状态相同的值，React 将退出而不渲染子级或触发效果。

你可以通过改变数组的一个副本来解决这个问题：

let tempItems = [...data]; // You call it `data` here, but I assume it's the same as `items` above.

但如果有任何事情取决于 item 的变化，你会遇到同样的问题，所以你必须复制所有内容，这更昂贵：

let tempItems = data.map(d => ({...d}));

另一种方法是只复制您要变异的内容（或切换到不可变的数据结构库，如 Immer 或 Immutable.js）：

let lastIndex = data.length - 1;
// Copy _only_ the value we're going to mutate
let tempItems = data.map((d, i) => i !== lastIndex ? d : {...d});

Answer 2

每次调用 setItems 时，如果要渲染，都必须传递一个新数组。如果你改变了同一个数组，那么 react 的相等性检查会检查事情是否发生了变化，总是会告诉数组没有改变，所以不会发生渲染。

例如:)

let a = [{animation:  true}]
let b = a
a[0].animation = false
console.log(a === b) // This returns true

您可以改为使用map 循环遍历数组并返回一个新数组。

const clickItem = (item: CartItemType) => {
  let tempItems = data.map((a, index) => {
    if (index !== (item.id - 1)) { return a }
    return {...a, animation: "item animate__animated animate__zoomOut"}
  })
  setItems(tempItems!);
};

Answer 3

常见错误。我一直这样做。如果基础对象引用发生更改，则认为状态已更改。 所以这些对象不会改变：

给定：

interface {
  id: number
  type_name: string
}
const [items, setItems] = useState([] as CartItemType[]);
let curItems = items;

时间：

curItems.push(new CartItemType());
setItems(curItems);

预期：

状态改变被触发

实际：

未触发状态更改

现在...什么时候：

curItems.push(new CartItemType());
setItems([...curItems]);

预期：

状态改变被触发

实际：

状态改变被触发

对象也是如此。事实是，如果您更改对象的底层属性（和数组，因为数组是具有数字属性名称的对象），JavaScript 不会考虑对象已更改，因为对该对象的引用未更改。它与 TypeScript 或 React 无关，是通用 JS 的东西；事实上，这就是 React 用作​​其 Ref 对象的杠杆。如果您希望它们被视为不同，请通过破坏它来创建新对象/数组来更改引用。