无法在 React 项目中对对象数组变量进行字符串化

Question

如图所示，steppedJobDataState不是空的。但是 x = stringified steppedJobDataState，但日志记录显示一组空数组。

我这样做是因为我需要使用 localStorage，但我只是向它发送空数组，我不知道为什么。

const [steppedJobDataState, setSteppedJobDataState] = useState([]); 
let x = JSON.stringify(steppedJobDataState)
//cc = console.log
cc(steppedJobDataState)
cc(x)

...状态全内容：

更多代码：

function Career() {

    const [linearJobDataState, setLinearJobDataState] = useState([]);
    const [steppedJobDataState, setSteppedJobDataState] = useState([]); //     
    cc(steppedJobDataState)
    cc(x)


    return (
      <>
          <FormContainer
              linearJobDataState = {linearJobDataState}
              setLinearJobDataState = {setLinearJobDataState}
              steppedJobDataState = {steppedJobDataState}
              setSteppedJobDataState = {setSteppedJobDataState}
          />
          <br />

          <LinearGraph
              linearJobDataState = {linearJobDataState}
              setLinearJobDataState = {setLinearJobDataState}
          />

          <SteppedGraph
              steppedJobDataState = {steppedJobDataState}
              setSteppedJobDataState = {setSteppedJobDataState}
          />
      </>
    );
}

export default Career;

和

export function handleSteppedJobSubmission(steppedJobDataState, setSteppedJobDataState){
    let jobData = setSteppedData();
    jobData = checkSteppedData(jobData);

    if (jobData[0].pass === true) {
        jobData = runCalculationsOnSteppedData(jobData);
        updateSteppedJobDataState(jobData, steppedJobDataState, setSteppedJobDataState);
    }
}


function setSteppedData(){
    let jobDataToBeReturned = [];
    jobDataToBeReturned.jobTitle = document.querySelector('#steppedJobTitle').value;
    let salaryAmountsNodes = document.querySelectorAll('.incomeSteppedJob');
    let salaryYearsNodes = document.querySelectorAll('.yearThisSteppedIncomeBegins');
    jobDataToBeReturned.salaryAmounts = [];
    jobDataToBeReturned.salaryYears = [];

    salaryAmountsNodes.forEach(e => {
        jobDataToBeReturned.salaryAmounts.push(+e.value);
    });

    salaryYearsNodes.forEach(e => {
        jobDataToBeReturned.salaryYears.push(+e.value);
    });

    return jobDataToBeReturned;
}


export function runCalculationsOnSteppedData(jobData){
    let jobDataToBeReturned = new JobDataHandler(jobData).findStepped();

    return jobDataToBeReturned;
}

function updateSteppedJobDataState(jobData, steppedJobDataState, setSteppedJobDataState){
    let extantJobs = [...steppedJobDataState];

    if (steppedJobDataState.length === 0){
        setSteppedJobDataState(jobData);
        localStorage.setItem("steppedJob", 
    } else {
        let combinedJobs = [...extantJobs, ...jobData];
        setSteppedJobDataState(combinedJobs);
        localStorage.setItem("steppedJob", 
    }
 }

我只是试图制作我的代码的最小版本来重现错误并分享它，但不幸的是......最小版本实际上有效。我不知道为什么我的坏了。这是工作的最小版本：

import './App.css';
import {useState} from "react";

function handleState(setJobState, jobState) {

  let array = [{
    jobTitle: "Random",
    key: 0,
    pass: true,
    salaryAmounts: [123, 123, 123, 123, 123, 123, 123, 123, 123, 123, 123, 123, 123, 123, 123],
    salarySumByYear: [123, 246, 369, 492, 615, 738, 861, 984, 1107, 1230, 1353, 1476, 1599, 1722, 1845],
    salaryYears: [1],
    sum: 1845,
    yearsNumbered: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5', 'Year 6', 'Year 7', 'Year 8', 'Year 9', 'Year 10', 'Year 11', 'Year 12', 'Year 13', 'Year 14', 'Year 15'],
  }];

  array = array.concat(jobState);

  setJobState(array);
  console.log(jobState)

}

function App() {

  const [jobState, setJobState] = useState([]);
  let x = JSON.stringify(jobState);
  console.log(x)

  return (
    <div>
      <button onClick={(e) => {
        e.preventDefault();
        handleState(setJobState, jobState);
        }}>Submit</button>
    </div>
  );
}

export default App;

Answer 1

检查您处理对象的方式。没有确切的代码很难提供答案。但是如果你的对象有数据那么它应该打印。

您的对象仍然返回一个空数组这一事实告诉我您的对象中没有数据。您应该将日志添加到每个更改数据的函数的开头和结尾，以查看您的数据是如何处理的，并确保您按预期分配数据。

Answer 2

根据cc(steppedJobDataState)的结果，steppedJobDataState中的每一项都是一个带有属性的空数组。好像

const steppedJobDataState = []
const item = [];
item.jobTitle = 'Random';
steppedJobDataState.push(item);
const x = JSON.stringify(steppedJobDataState);
cc(x);

上面的输出必须是[[]]，因为JSON.stringify不会对数组的属性进行字符串化。使用 Object 类型而不是 Array 来表示 steppedJobDataState 中的项目。

无法在 React 项目中对对象数组变量进行字符串化

Can't stringify an array-of-objects variable in react project

javascript

json

stringify

reactjs