ReactJS |Конкатные массивы внутри объекта - PullRequest
Новая
       10

ReactJS |Конкатные массивы внутри объекта

0 голосов
/ 12 декабря 2018

Я сейчас работаю над приложением React JS, и у меня есть Массив , в котором Объекты , а внутри Объекты , в нем Массивы.

Сначала приведу код, 

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]
    })
  }

Итак, у меня есть массив Array, который здесь есть, и он содержит объекты, которые содержат мои заголовки QuestionTitles и мой массив вопросов.

Я хочу создать программу ввода для объекта Quesiton (которая содержит questionTitle и вопросы), поэтому я попытался объединить свой массив в 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 изображение

1 Ответ

0 голосов
/ 12 декабря 2018

Попробуйте это так: 

  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, чтобы узнать немного больше об этом.

...