Question

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

2019-09-20

1224

reactjs

我有一个包含状态的存储文件。我像这样定义用户：

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 is not iterable

我尝试在其中仅设置一条记录：

jobRecord: [job],

但 jobRecord 的结果是：

[object Object]

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

Answer 1

您正在检查 store.getState().user 中的 falsey 值，而它实际上是一个对象。因此它将始终为真，并且 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 join = user && user.jobRecord 在 user 或 user.jobRecord 为未定义时将未定义的值分配给 joined 变量

要修复此问题，请使用以下代码：

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