无法为从道具中提取的对象添加新属性

Question

我正在将props传递给另一个组件，但是在我的接收组件中，我想用props初始化一个状态，但是我想为该props添加一个额外的属性(包含对象类型数据)，然后初始化状态。我的状态初始化登录是在useEffect中，我想在其中添加一个新属性到对象

但是问题是

• 当我添加一个属性到一个对象(道具)它没有添加，

• 当我在useEffect下面提到的console.log中添加属性时，它会显示正确结果

  import EditParts from "./EditPartsChange";
  function MechanicTable() {
  const [partsList,setpartsList]= useState([{id:123,name:"oil filter"},{id:124,name:"air filter"}]);
  return(
  <>
  <EditParts partsList={partsList} />
  </>
  );  
  }
  export default MechanicTable;
  

_

function EditParts({ partsList }) {
const [_partsList, setPartsList] = useState([]);
useEffect(() => {
let parts = [...partsList];
parts = parts.map((part) => ({
...part,
dbvalue: "db value",
}));
// If I console the parts variable after completing the loop then it also don't show me the updated results
//Show only correct result 👇
console.log(
parts.map((part) => ({
...part,
dbvalue: "db value",
}))
);
//Show only correct result ☝️
const unSubscribe = setPartsList(parts);
return () => {unSubscribe;};
}, [partsList]);
return(<></>);
}
export default EditParts;

这是到代码的链接https://codesandbox.io/s/react-hooks-crud-firebase-forked-ypp9qi?file=/src/App.js

<EditPartsChange partsList={part.partsList} />

是代码

中的受影响区域

Answer 1

Issue是不可重现的，但是这段代码本身就足够了。

useEffect(() => {
const parts = partsList.map((part) => ({
...part,
dbvalue: "db value",
}));

const unSubscribe = setPartsList([...parts]);
return () => {unSubscribe;};
}, [partsList]);