ReactJS|Concat数组位于对象内部

Question

我目前正在开发React JS应用程序，我有一个数组，其中有对象；在目标内部有Arrays。

这是代码第一，

constructor() {
super();
this.state = {
namaSantri: null,
examTitle: 'PLP BAHAS Arab Talaqqi',
examLevel: 0,
examType: 'Ujian 1 Tulis',
vocabQ: [{questionTitle: 'Question Title', question: ['Question 1', 'Question 2']}],
};
}
componentDidMount(){
var questionEx = {questionTitle: 'Question Title2', question: ['Question 1']}
var anotherArray = ['Question 2']
var addIndex = questionEx.question.concat(anotherArray)
this.setState({
vocabQ: [...this.state.vocabQ, addIndex]
})
}

所以我有一个数组，这里是vocabQ，它包含对象，它包含我的问题标题和问题数组。

我想在这里为Quesiton对象(包含questionTitle和questions(创建一个输入程序，所以我试图在addIndex处插入我的数组，但它什么也没显示。帮助

我的渲染，

render() {
/**SOMETHING THAT YOU NEED TO WRITE TO OUTPUT AN ARRAY? */
const map = this.state.vocabQ.map((d) => <p key={d.questionTitle}>{d.questionTitle}&nbsp;{d.question}</p>);
return (
<div /**DIV PAGE START */
className="App">
<div /**DIV HEADER START */
className="DivHeader">
<Center>
<p className="ExamTitle">{this.state.examTitle}</p>
</Center>
<Center>
<p className="ExamLevel">Level&nbsp;{this.state.examLevel}</p>
</Center>
<Center>
<p className="ExamType">{this.state.examType}</p>
</Center>
<Center>
<div className="NameInput">
<InputText value={this.state.namaSantri} onChange={(e) => this.setState({value: e.target.namaSantri})} />
{/**HERE IS WHERE THE ARRAY SHOULD BE */}
<span>&nbsp;&nbsp;&nbsp;&nbsp;{map}</span>
</div>
</Center>
{/**DIV HEADER END */}
</div>
<div /**DIV VOCAB QUESTIONS START */> 
{/**DIV VOCAB QUESTIONS END */}
</div>
{/**DIV PAGE END*/}
</div >
);
}

注意：它只显示"问题标题问题1问题2">图像

Answer 1

这样试试：

componentDidMount(){
var questionEx = {questionTitle: 'Question Title2', question: ['Question 1']}
var anotherArray = ['Question 2']
var addIndex = questionEx.question.concat(anotherArray)
this.setState({
vocabQ: [...this.state.vocabQ, ...addIndex]  //<----This "..." is the part that has changed
})
}

基本上，你必须在两个数组上都使用排列运算符，才能按你想要的方式工作https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_operatorhttps://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_operator了解更多关于这方面的信息。