[英]How to push elements into array in react state, the array is located inside of object
將 object 推入數據中的問題數組中,它會給出此錯誤 Uncaught TypeError: data.sections is not iterable at handleClick (SecondStep.tsx:14:1)
export default function CreateStepper() { const [data, setData] = useState({ name: "", desc: "", sections: [], }); console.log(data); return ( <><SecondStep data={data} setData={setData} /></>) } function SecondStep(data: any, setData: any) { const [addSection, setAddSection] = useState(1); const newSection = { sectionName: "Hdsd", sectionDesc: "dsdsd", question: [], }; const handleClick = () => { setData({...data, sections: [...data.sections, newSection] }); }; return ( <Box> </Box> ); } export default SecondStep;
當我執行下面的代碼時,它會返回“Uncaught TypeError: Cannot read properties of undefined (reading 'push')”這個類型錯誤。 如何將新的 object 推送到 React useState 中的數組。 首先useState是object里面的object有疑問:【數組如何推入object這個數組】
const [data, setData] = useState({ name: "", desc: "", sections: [], }); const newSection = { sectionName: "Hello", sectionDesc: "Desc", question: [], }; const handleClick = () => { let copyData = data; copyData.sections.push(newSection); setData(copyData); };
您可以在 setState 方法中獲取最新版本的 state,然后您可以在其中添加您的 object。
const [data, setData] = useState({
name: "",
desc: "",
sections: [],
});
const newSection = {
sectionName: "Hello",
sectionDesc: "Desc",
question: [],
};
const handleClick = () => {
setData(data => ({
...data,
sections: [...data.sections, newSection]
})
};
但我實際上不太確定您是否需要...data
,您可以將其排除在外。
您必須克隆 object 然后將元素推送到數組中,
這是下面的示例,
import "./styles.css";
import React, {useState} from 'react'
export default function App() {
const [data, setData] = useState({
name: "",
desc: "",
sections: [],
});
const newSection = {
sectionName: "Hello",
sectionDesc: "Desc",
question: [],
};
const handleClick = () => {
setData({...data, sections:[...data.sections, newSection]});
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button onClick={handleClick}>Click</button>
<h4>Sections: {data.sections[0]?.sectionName}</h4>
</div>
);
}
代碼沙箱: https://codesandbox.io/s/react-do7bk?file=/src/App.js:0-572
更新問題的答案是:
import "./styles.css";
import React, { useState } from "react";
export const CreateStepper = () => {
const [data, setData] = useState({
name: "",
desc: "",
sections: []
});
const SecondStep = (data: any) => {
const [addSection, setAddSection] = useState(1);
const newSection = {
sectionName: "Hdsd",
sectionDesc: "dsdsd",
question: []
};
const handleClick = () => {
setData({ ...data, sections: [...data.sections, newSection] });
};
return <></>;
};
return (
<>
<SecondStep data={data} />
</>
);
};
export default CreateStepper;
您還可以通過道具為 SecondStep 提供 function 如果您願意,這應該可以:
export default function CreateStepper() {
const [data, setData] = useState({
name: "",
desc: "",
sections: [],
});
console.log(data);
return (
<><SecondStep data={data} setData={setData} /></>)
}
function SecondStep(data: any, setData: (data : any) => void) {
const [addSection, setAddSection] = useState(1);
const newSection = {
sectionName: "Hdsd",
sectionDesc: "dsdsd",
question: [],
};
const handleClick = () => {
props.setData({ ...data, sections: [...data.sections, newSection] });
};
return (
<Box>
</Box>
);
}
export default SecondStep;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.