使用React和Javascript保存动态创建的数据的最佳方法是什么？

我一直在尝试让我的动态表单工作，但我想知道最好的做法是保存这样生成的数据

我的解决方案可行，但我觉得有更好的方法

目前，我正在将输入字段的两个值保存在一个单独的数组中。但实际上它们属于一起，所以我需要保存一个链接值和一个内容值

稍后，我需要映射这些值以创建具有存储值的新元素

我现在的问题是，我不知道如何同时映射两个数组。我还想知道，仅仅创建一个包含所有这些值的对象，然后映射到上面是否更好

希望有人能帮我

这是我的代码：

类MediaInput扩展了React.Component{
render（）{
const linkName=`link${this.props.index}`；
const contentName=`content${this.props.index}`；
返回(
媒体（可选）
this.props.handleChangeUrl（事件，this.props.index）}
name={linkName}
value={this.props.mediaURL[this.props.index]}
className=“表单控件”
placeholder=“添加您的媒体url。我们接受YouTube、Vimeo和SoundCloud链接”
type=“text”
/>
this.props.handleChangeContent（事件，this.props.index）}
value={this.props.mediaContents[this.props.index]}
className=“表单控件”
占位符=“添加媒体内容”
type=“text”
/>
);
}
}
导出默认类AddSparkShanghai扩展组件{
建造师（道具）{
超级（道具）；
this.createSpark=this.createSpark.bind（this）；
this.onChange=this.onChange.bind（this）；
this.handleChangeUrl=this.handleChangeUrl.bind（this）；
this.handleChangeContent=this.handleChangeContent.bind（this）；
这个州={
媒体字段：[]，
内容：[]，
MediaURL:[null，null，null]，
mediaContents:[{''，''，''，]，
};
}
[...]
//添加/删除媒体字段
添加（）{
event.preventDefault（）；
const mediaFields=this.state.mediafiels.concat（MediaInput）；
如果（i<3）{
this.setState（{mediaFields}）；
我++
}否则{
Bert.alert（'只允许3个媒体链接'，'危险'）；
}
}
删除（）{
event.preventDefault（）；
const lastElement=this.state.mediaFields.pop（）；
const mediaFields=this.state.mediaFields；
this.setState（{mediaFields}）；
我--
}
//处理更改媒体字段
handleChangeUrl（e，索引）{
//数组的浅拷贝
const mediaUrls=this.state.mediaUrls.slice（）；
让url=e.target.value
如果（！/^https？：\/\//i.test（url））{
url='http://'+url；
}
MediaURL[索引]=url；
this.setState（{mediaURL}）；
}
handleChangeContent（e，索引）{
//数组的浅拷贝
const mediaContents=this.state.mediaContents.slice（）；
mediaContents[索引]=e.target.value；
this.setState（{mediaContents}）；
}
[...]
const mediaFields=this.state.mediaFields.map（（元素，索引）=>{
返回
}) 
[...]
{mediaFields}
this.add（）}>添加媒体字段
this.remove（）}>删除媒体字段

未经测试的代码，但如果您更改以下内容，它应该可以工作：

更改此项：

this.state ={
  mediaFields: [],
  content: [],
  mediaUrls: [ null, null, null ],
  mediaContents: [ {'', '', ''],
};

致：

和变化：

handleChangeUrl(e, index) {
  // Shallow copy of array
  const mediaUrls = this.state.mediaUrls.slice();
  let url = e.target.value
  if (!/^https?:\/\//i.test(url)) {
    url = 'http://' + url;
  }

   mediaUrls[index] = url;
   this.setState({ mediaUrls});
}

handleChangeContent(e, index) {
  // Shallow copy of array
  const mediaContents = this.state.mediaContents.slice();
  mediaContents[index] = e.target.value;
  this.setState({ mediaContents });
}

致：

和变化：

handleChangeUrl(e, index) {
  // Shallow copy of array
  const mediaUrls = this.state.mediaUrls.slice();
  let url = e.target.value
  if (!/^https?:\/\//i.test(url)) {
    url = 'http://' + url;
  }

   mediaUrls[index] = url;
   this.setState({ mediaUrls});
}

handleChangeContent(e, index) {
  // Shallow copy of array
  const mediaContents = this.state.mediaContents.slice();
  mediaContents[index] = e.target.value;
  this.setState({ mediaContents });
}

致：

最后：

add() {
  event.preventDefault();
  const mediaFields = this.state.mediaFields.concat(MediaInput);
  if (i < 3) {
    this.setState({ mediaFields });
    i++
  } else {
    Bert.alert('Only 3 media links are allowed', 'danger');
  }
}

remove() {
  event.preventDefault();
  const lastElement = this.state.mediaFields.pop();
  const mediaFields = this.state.mediaFields;
  this.setState({ mediaFields });
  i--;
}

add（）{
event.preventDefault（）；
const mediaFields=this.state.mediafiels.concat（MediaInput）；
如果（i<3）{
this.setState（{mediaFields}）；
我++
}否则{
Bert.alert（'只允许3个媒体链接'，'危险'）；
}
}
删除（）{
event.preventDefault（）；
const lastElement=this.state.mediaFields.pop（）；
const mediaFields=this.state.mediaFields；
this.setState（{mediaFields}）；
我--；
}

致：

add（）{
event.preventDefault（）；
const mediaFields=this.state.mediafiels.concat（MediaInput）；
const data=this.state.data.slice（）；
数据推送（{link:，content:}）；
如果（i<3）{
this.setState（{data，mediaFields}）；
我++
}否则{
Bert.alert（'只允许3个媒体链接'，'危险'）；
}
}
删除（）{
event.preventDefault（）；
const lastElement=this.state.mediaFields.pop（）；
const mediaFields=this.state.mediaFields；
const data=this.state.data.slice（）；
data.pop（）；
this.setState（{data，mediaFields}）；
我--；
}

注意：已编辑以修复最后一批更改

在的帮助下，我能够让这个示例按照我想要的方式工作

以下是完整的代码：

类MediaInput扩展了React.Component{
render（）{
const linkName=`link${this.props.index}`；
const contentName=`content${this.props.index}`；
返回(
媒体（可选）
this.props.handleChangeUrl（事件，this.props.index）}
name={linkName}
value={this.props.mediaData[this.props.index].link}
className=“表单控件”
placeholder=“添加您的媒体url。我们接受YouTube、Vimeo和SoundCloud链接”
type=“text”
/>
this.props.handleChangeContent（事件，this.props.index）}
value={this.props.mediaData[this.props.index].content}
className=“表单控件”
占位符=“添加媒体内容”
type=“text”
/>
);
}
}
导出默认类AddSparkShanghai扩展组件{
建造师（道具）{
超级（道具）；
this.handleChangeUrl=this.handleChangeUrl.bind（this）；
this.handleChangeContent=this.handleChangeContent.bind（this）；
这个州={
媒体字段：[]，
mediaData:[]，
};
}
[...]
//添加/删除媒体字段
添加（）{
event.preventDefault（）；
const mediaFields=this.state.mediafiels.concat（MediaInput）；
const mediaData=this.state.mediaData.slice（）；
push（{link:，content:}）；
如果（i<3）{
这
add() {
  event.preventDefault();
  const mediaFields = this.state.mediaFields.concat(MediaInput);
  if (i < 3) {
    this.setState({ mediaFields });
    i++
  } else {
    Bert.alert('Only 3 media links are allowed', 'danger');
  }
}

remove() {
  event.preventDefault();
  const lastElement = this.state.mediaFields.pop();
  const mediaFields = this.state.mediaFields;
  this.setState({ mediaFields });
  i--;
}

add() {
  event.preventDefault();
  const mediaFields = this.state.mediaFields.concat(MediaInput);
  const data = this.state.data.slice();
  data.push({ link: "", content: "" });
  if (i < 3) {
    this.setState({ data, mediaFields });
    i++
  } else {
    Bert.alert('Only 3 media links are allowed', 'danger');
  }
}

remove() {
  event.preventDefault();
  const lastElement = this.state.mediaFields.pop();
  const mediaFields = this.state.mediaFields;
  const data = this.state.data.slice();
  data.pop();
  this.setState({ data, mediaFields });
  i--;
}