在状态挂钩中更新对象时，React Component 不会重新渲染

Question

为什么状态更新的时候这个组件没有更新？但是，当文件更新时（如编辑和保存代码），组件将重新渲染并显示更新后状态的正确值。这是代码

import { useReducer } from "react";
import "./styles.css";

const init = [
  {
    name: "Car",
    stock: 100
  },
  {
    name: "Truck",
    stock: 50
  }
];

const reducer = (state, action) => {
  if (action.type === "add") { 
    state[0].stock++;
    return state;
  } else { 
    return state;
  }
};


export default function App() {
  const [state, dispatch] = useReducer(reducer, init);
  const addCarStock = () => {
    dispatch({ type: "add" });
  };

  return (
    <div>
      <p>Car Stock : {state[0].stock}</p>
      <button onClick={addCarStock}>Add Car Stock</button>
    </div>
  );
}

您可以在sandbox.io

中打开此代码

Answer 1

当你state[0].stock++;。它更改现有数组（您实际上可以通过在 reducer 函数的第一行中放置 console.log(state); 来检查该数组更新）并且当 react 渲染时它会进行浅比较（引用检查）并假设它忽略重新渲染是同一个数组（因为prev和new state指的是同一个实例）。

您需要使用更改创建一个新的数组实例 (state) 并 return 它。

const reducer = (state, action) => {
  if (action.type === "add") {
    return state.map((item,itemIndex) => {
      if(itemIndex === 0){
        return {...item, stock: item.stock + 1}
      } else {
        return item;
      }
    });
  } else {
    return state;
  }
};

代码沙箱 => https://codesandbox.io/s/recursing-davinci-iid5h?file=/src/App.js

在状态挂钩中更新对象时，React Component 不会重新渲染

React Component does not re rendering when updating an object in state hooks

javascript

reactjs

use-state

react-component