javascript - 提交前建立数组

Question

我正在使用 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;

Answer 1

是的，错误来自您的方法 addMoreFields 每次调用您创建新对象时:

   const newField = {
          id: 'dialogue03'
        };

这就是为什么你没有得到最后的字段!要修复它，您需要在函数外部创建 Field 对象。检查这个sandbox求答案。