Reactjs 表单使用对象数组进行渲染，但键入时出错

我使用

组件willreceiveprops

首次加载表单时，使用对象数组呈现表单以填充表单。表单正确呈现，没有错误

this.state.data

呈现一个如下所示的对象数组：

this.state.data: (3) [Object, Object, Object]
[{
company: Company A,
title: Title A,
uniqueId: uniqueId A
},
{
company: Company A,
title: Title A,
uniqueId: uniqueId A
}]

当我在表单中键入

handleInputChange

时，似乎导致了每个键盘输入引发的错误

未捕获类型错误：positions.map不是PositionList无状态组件.reactComponent.js.无状态组件.render的函数，当我提交表单
this.state.data
时，似乎未更改，因为它返回的对象和数组如下所示：

this.state.data: (3) [Object, Object, Object]
    [{
    company: Company A,
    title: Title A,
    uniqueId: uniqueId A
    },
    {
    company: Company A,
    title: Title A,
    uniqueId: uniqueId A
    },
{
"": "Whatever text I've typed in to the input field"
}]

请参阅下面的完整表单渲染。虽然时间很长，但我认为我需要添加大量的细节来说明问题

function PositionItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>
    <input type="text" defaultValue={props.company} onChange={props.onChange} />
  </li>;
}


function PositionList(props) {
  const positions = props.positions;

  const listPositions = positions.map((position) =>
  // Correct! Key should be specified inside the array.
  <PositionItem key={position.uniqueId.toString()}
    company={position.company}
    uniqueId={position.uniqueId}
    onChange={props.onChange}
  />
);

return (
  <ul>
    {listPositions}
  </ul>
);
}

export default class CareerHistoryFormPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const profileCandidateCollection = nextProps.profileCandidate;
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;

    const positions = careerHistoryPositions.map((position) =>
    ({
      uniqueId: position.uniqueId || '',
      company: position.company || '',
      title: position.title || ''
    }));
    this.setState({
      data: positions
    })
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    const data = {...this.state.data, ...{[name]: value}};

    this.setState({
      data: data
    });
  }

  handleFormSubmit(event) {
    event.preventDefault();
    console.log("click", this.state.data);
  }

  render() {
    console.log('this.state.data: ', this.state.data);
    return (
      <div>
        <form className="careerHistoryForm" onSubmit={this.handleFormSubmit}>
          <PositionList positions={this.state.data} onChange={this.handleInputChange} />
          <input type="submit" className="btn btn-primary" value="Save" />
        </form>
      </div>

    );
  }
}

功能位置项目（道具）{
//正确！无需在此处指定密钥：
返回

；
}
功能位置列表（道具）{
常量位置=道具位置；
const listPositions=positions.map（（位置）=>
//正确！应在数组内指定密钥。
);
返回(

{listPositions}

);
}
导出默认类CareerHistoryFormPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
};
this.handleFormSubmit=this.handleFormSubmit.bind（this）；
this.handleInputChange=this.handleInputChange.bind（this）；
}
组件将接收道具（下一步）{
const profileCandidateCollection=nextProps.profileCandidate；
常量careerHistoryPositions=profileCandidateCollection&&profileCandidateCollection.careerHistoryPositions；
const positions=careerHistoryPositions.map（（位置）=>
({
uniqueId:position.uniqueId | |“”，
公司：position.company | |“”，
标题：position.title | |“
}));
这是我的国家({
数据：职位
})
}
handleInputChange（事件）{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
const name=target.name；
const data={……this.state.data，{[name]：value}；
这是我的国家({
数据：数据
});
}
handleFormSubmit（事件）{
event.preventDefault（）；
log（“单击”，this.state.data）；
}
render（）{
log（'this.state.data:'，this.state.data）；
返回(
);
}
}
您正在为对象设置数据，然后尝试调用对象上的
.map

.map
仅适用于阵列

看起来您要替换此行：

const data = {...this.state.data, ...{[name]: value}};

const data = [...this.state.data, {[name]: value}];

这一行：

const data = {...this.state.data, ...{[name]: value}};

const data = [...this.state.data, {[name]: value}];

我如何附加数组？我回答的最后一行对不起，安迪，我还在这里学习。所以在
componentWillReceiveProps
中，我想删除map并添加
const data=[…this.state.data，{[name]：value}]。这对我来说没有意义。你能准确地说出它应该是什么样子吗？好的，现在我有两个错误。首先，每次键盘笔划我都会得到
TypeError:无法读取undefined Array.map PositionList的属性“toString”
，当我提交表单时，它会显示为append使用每个键笔划创建了一个新对象。