我正在使用react构建我的对话应用程序的前端部分。我想创建一个表单，用户可以在其中添加更多字段并将这些字段推送到数组中，并在他/她实际提交之前进行构建。
因此，我的对象看起来很奇怪。
每当用户单击加号按钮时，都应使用新对象推送部件阵列。请看下面的图片。
我现在得到的是，每当我单击加号按钮时，它将创建一个在parts数组中具有一个对象的对象，从而删除前一个对象。请参见下面的代码。
addMoreFields() {
const newField = {
id: 'dialogue03'
};
newField.parts = [];
newField.parts.push({
text: this.state.text,
speaker: this.state.speaker,
prompt: this.state.prompt,
helperFirst: this.state.helperFirst,
helperTarget: this.state.helperTarget
});
//const joined = this.state.dialogues.concat(newField);
//this.setState({ dialogues: joined });
//console.log(this.state.dialogues);
console.log(newField);
this.setState({
id: '',
text: '',
speaker: '',
prompt: '',
helperFirst: '',
helperTarget: ''
});
}
这就是我的整个对象的样子。
const lines = [
{
id: 'dialogue1',
parts: [
{
text: `как дела?`,
audio: 'audio/аудио1.mp3',
prompt: '',
speaker: 1,
id: 1
},
{
text: 'у меня все хорошо, а как ты?',
audio: 'audio/аудио2.mp3',
prompt: 'Say that: I am OK, how about you?',
speaker: 2,
id: 2,
helpers: [
{
word_mother: "I'm all right",
word_target: 'У меня все хорошо'
},
{
word_mother: 'And you?',
word_target: 'А как ты?'
}
]
},
{
text: 'у меня тоже неплохо, кстати а что ты делаешь в субботу',
audio: 'audio/аудио3.mp3',
prompt: '',
speaker: 1,
id: 3,
helpers: [
{
word_mother: 'Not bad',
word_target: 'неплохо'
},
{
word_mother: 'By the way',
word_target: 'Кстати'
}
]
},
{
text: 'в субботу у меня футбол, а что?',
audio: 'audio/аудио4.mp3',
speaker: 2,
prompt: 'Say that: I have football on Saturday, why are you asking?',
id: 4,
helpers: [
{
word_mother: 'Why are you asking?',
word_target: 'А что?'
}
]
},
{
text: 'Просто я хотел пригласить тебя на день рождения',
audio: 'audio/аудио5.mp3',
speaker: 1,
prompt: '',
id: 5,
helpers: [
{
word_mother: 'Just',
word_target: 'Просто'
},
{
word_mother: 'Wanted',
word_target: 'Хотел (past simple form)'
},
{
word_mother: 'To invite',
word_target: 'Пригласить'
},
{
word_mother: 'Birthday',
word_target: 'День рождения'
}
]
},
{
text:
'Ты знаешь в субботу у меня работа, к сожалению, я не смогу прийти',
audio: 'audio/аудио6.mp3',
speaker: 2,
id: 6,
prompt:
'Say that: You know what, on Saturday I have football, unfortunately, I cannot come',
helpers: [
{
word_mother: 'You know what!',
word_target: 'Ты знаешь!'
},
{
word_mother: 'Unfortunately!',
word_target: 'К сожалению!'
},
{
word_mother: 'Cannot',
word_target: 'Не могу'
}
]
},
{
text: 'Тогда как насчет воскресенья',
audio: 'audio/аудио7.mp3',
speaker: 1,
prompt: '',
id: 7,
helpers: [
{
word_mother: 'Then',
word_target: 'Тогда'
},
{
word_mother: 'How about',
word_target: 'Как насчет'
}
]
},
{
text:
'Да, давай увидимся в Воскресенье, как раз, у буду свободен весь день',
audio: 'audio/аудио8.mp3',
speaker: 2,
id: 8,
prompt:
"Tell your partner: Yes, let's meet on Sunday, it just so happens that, I will be free on Sunday the entire day",
helpers: [
{
word_mother: "Let's meet",
word_target: 'Давай увидимся'
},
{
word_mother: 'It just so happens that',
word_target: 'Как раз'
},
{
word_mother: 'I will be free',
word_target: 'Я буду свободным'
},
{
word_mother: 'The entire day',
word_target: 'Весь день'
}
]
}
]
},
{
id: 'dialogue2',
parts: [
{
text: `как ты?`,
audio: 'audio/аудио1.mp3',
prompt: '',
speaker: 1,
id: 1
},
{
text: 'все хорошо, а как ты?',
audio: 'audio/аудио2.mp3',
prompt: 'Say that: I am OK, how about you?',
speaker: 2,
id: 2,
helpers: [
{
word_mother: "I'm all right",
word_target: 'У меня все хорошо'
},
{
word_mother: 'And you?',
word_target: 'А как ты?'
}
]
},
{
text: 'у меня тоже неплохо, кстати а что ты делаешь в субботу',
audio: 'audio/аудио3.mp3',
prompt: '',
speaker: 1,
id: 3,
helpers: [
{
word_mother: 'Not bad',
word_target: 'неплохо'
},
{
word_mother: 'By the way',
word_target: 'Кстати'
}
]
},
{
text: 'в субботу у меня футбол, а что?',
audio: 'audio/аудио4.mp3',
speaker: 2,
prompt: 'Say that: I have football on Saturday, why are you asking?',
id: 4,
helpers: [
{
word_mother: 'Why are you asking?',
word_target: 'А что?'
}
]
},
{
text: 'Просто я хотел пригласить тебя на день рождения',
audio: 'audio/аудио5.mp3',
speaker: 1,
prompt: '',
id: 5,
helpers: [
{
word_mother: 'Just',
word_target: 'Просто'
},
{
word_mother: 'Wanted',
word_target: 'Хотел (past simple form)'
},
{
word_mother: 'To invite',
word_target: 'Пригласить'
},
{
word_mother: 'Birthday',
word_target: 'День рождения'
}
]
},
{
text:
'Ты знаешь в субботу у меня работа, к сожалению, я не смогу прийти',
audio: 'audio/аудио6.mp3',
speaker: 2,
id: 6,
prompt:
'Say that: You know what, on Saturday I have football, unfortunately, I cannot come',
helpers: [
{
word_mother: 'You know what!',
word_target: 'Ты знаешь!'
},
{
word_mother: 'Unfortunately!',
word_target: 'К сожалению!'
},
{
word_mother: 'Cannot',
word_target: 'Не могу'
}
]
},
{
text: 'Тогда как насчет воскресенья',
audio: 'audio/аудио7.mp3',
speaker: 1,
prompt: '',
id: 7,
helpers: [
{
word_mother: 'Then',
word_target: 'Тогда'
},
{
word_mother: 'How about',
word_target: 'Как насчет'
}
]
},
{
text:
'Да, давай увидимся в Воскресенье, как раз, у буду свободен весь день',
audio: 'audio/аудио8.mp3',
speaker: 2,
id: 8,
prompt:
"Tell your partner: Yes, let's meet on Sunday, it just so happens that, I will be free on Sunday the entire day",
helpers: [
{
word_mother: "Let's meet",
word_target: 'Давай увидимся'
},
{
word_mother: 'It just so happens that',
word_target: 'Как раз'
},
{
word_mother: 'I will be free',
word_target: 'Я буду свободным'
},
{
word_mother: 'The entire day',
word_target: 'Весь день'
}
]
}
]
}
];
export default lines;
最佳答案
是的，每次创建新对象都被调用时，错误是来自方法addMoreFields的：
const newField = {
id: 'dialogue03'
};
这就是为什么您没有获得最后的字段！
要修复它，您需要在函数外部创建Field对象。
检查此sandbox的答案。
关于javascript - 提交前建立阵列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57253038/