Question

如何在反应状态下将元素推送到数组中，该数组位于对象内部

2022-08-17

100

javascript reactjs arrays javascript-objects use-state

将对象推送到数据中的问题数组内，它会出现此错误 Uncaught TypeError：data.sections 不可迭代在 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：无法读取未定义的属性（读取'push'）”此类型错误。如何在 React useState 中将新对象推送到数组。首先，useState 是对象内部的对象，它有疑问：[] 数组如何将对象推送到此数组

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);
 };

Answer 1

您可以在 setState 方法中获取状态的最新版本，然后可以在其中添加对象。

const [data, setData] = useState({
    name: "",
    desc: "",
    sections: [],
 });

const newSection = {
    sectionName: "Hello",
    sectionDesc: "Desc",
    question: [],
};

const handleClick = () => {
   setData(data => ({
     ...data,
     sections: [...data.sections, newSection]
   })
 };

但我实际上不太确定您是否需要 ...data ，您可能可以将其省略。

Answer 2

您必须克隆对象，然后将元素推送到数组中，

下面是示例，

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

Answer 3

您更新的问题的答案是：

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;

您还可以通过 Props 为 SecondStep 提供功能，如果您愿意，这应该可以工作：

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;