reactjs - 在 reactJS 应用程序中将状态对象推送到状态数组中

Question

我有一个包含状态的商店文件。我这样定义用户：

user: store.getState().user || { jobRecord: [] },

我想要的是将一些作业对象推送到 user.jobRecord 中。作业对象定义如下：

job: store.getState().job || { title: '', company: '', start_date: 
'', end_date: '' }

因此，首先，我为作业对象设置了一些值，然后将其推送到 user.jobRecord。

const joined = user && user.jobRecord;
store.setState({
  user: {
  ...user,
  jobRecord: [...joined, job],
  },
});

通过这样做，我得到类型错误：

TypeError：joined 不可迭代

我试着在其中设置一个记录：

jobRecord: [job],

但 jobRecord 的结果是：

[对象对象]

非常感谢您考虑我的问题。

Answer 1

您正在检查store.getState().user实际上是一个对象的虚假值。因此它永远是真实的，jobRecord永远不会被填充，并且[...user]在你对空对象进行解构时会出错。

user: store.getState().user || { jobRecord: [] },

为避免此问题，请使用Object.keys(this.state.user).length检查对象是否为空。

下面的工作代码： -

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    job: {},
    user: {}
  }
  componentDidMount () {
    let user= Object.keys(this.state.user).length || { jobRecord: [] };

    let job= this.state.job || {
      title: '',
      company: '',
      start_date: '',
      end_date: ''
    };

    const joined = user && user.jobRecord;
    this.setState({
      user: {
      ...user,
      jobRecord: [...joined, job],
      },
    });
  }
  render () {
    console.log('inside user',this.state.user)
    return (
      <div className="App">
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

无法迭代undefined值

const joined = user && user.jobRecord在未定义时或未定义时将未定义的值分配给joined变量useruser.jobRecord

要修复它，请改用以下代码：

const joined = user && user.jobRecord || [];