Реагировать на вставку данных во вложенный массив

Question

Я делаю школьный проект, где мне нужно вставить данные во вложенный массив. Я могу вставить данные в обычный массив. Но я не знаю, как вставить во вложенный массив. Как вы видите на изображении answers это вложенный массив. Мне нужно иметь возможность вставлять данные в имя и голоса , которые принадлежат вложенному массиву, называемому ответы. Если вам нужно больше кода, дайте мне знать!

Теперь для кода:

App.js

import React, { Component } from "react";
import { Router } from "@reach/router";

import Question from "./components/pages/Question";
import Questions from "./components/pages/Questions";
import Nav from "./components/layout/Nav";

import "./App.css";
import "bootstrap/dist/css/bootstrap.css";
import Ask from "./components/pages/Ask";
import Home from "./components/pages/Home";

export class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        {
          id: 1,
          name: "nd time giving error,during TENSORFLOW execution",
          answers: [
            {
              name:
                "Observables are lazy so you have to subscribe to get the value.",
              votes: 5
            },
            { name: "You can use asyncPipe", votes: -2 },
            {
              name:
                "The reason that it's undefined is that you are making an asynchronous operation",
              votes: 3
            }
          ]
        },
        {
          id: 2,
          name: "Is there a way to add/remove module in Android.bp?",
          answers: [
            { name: "Answer 1", votes: 2 },
            { name: "Answer 2", votes: 3 },
            { name: "Answer 3", votes: 0 }
          ]
        },
        {
          id: 3,
          name: "Primeng p-dropdown filtering suggestions problem",
          answers: [
            { name: "Answer 1", votes: 0 },
            { name: "Answer 2", votes: 1 }
          ]
        },
        {
          id: 4,
          name: "Configure CakePhp to send mail with SMTP",
          answers: [
            { name: "Answer 1", votes: 0 },
            { name: "Answer 2", votes: 1 }
          ]
        },
        {
          id: 5,
          name: "CSS not working",
          answers: [
            { name: "Answer 1", votes: 0 },
            { name: "Answer 2", votes: 1 }
          ]
        }
      ]
    };
  }
  getQuestion(id) {
    return this.state.data.find(q => q.id === Number(id));
  }
  //This work, but only able to insert into data. Not answers
  addQuestion(question) {
    const questionObject = {
      id: Math.random() * 10000000,
      name: question,
      answers: []
    };
    this.setState({
      data: [...this.state.data, questionObject]
    });
  }

  //With answerData, we can recieve the data to the parent, from the child.
  //We get data from question. What the user have answered

  getAnswer = answerData => {
    //Last element in the array is the id from the question

    const answerObject = {
      name: "some-test-name",
      answers: []
    };
    //Need to find the questionID, so we can parse the question to to the right answers
    const getQuestionId = this.state.data.find(q => q.id === 1);

    this.setState({
      //This wont work...I am tryning to find the question that the answer belongs to.
      answers: [...this.state.data.find(x => x.id === 1, answerObject)]
    });
  };

  render() {
    return (
      <div className="App">
        <Nav></Nav>

        <Router>
          <Ask
            path="/Ask"
            addQuestion={question => this.addQuestion(question)}
          ></Ask>

          <Questions
            path="/"
            data={this.state.data}
            askQuestion={text => this.askQuestion(text)}
          ></Questions>

          <Question
            path="/question/:id"
            getQuestion={id => this.getQuestion(id)}
            getAnswer={getAnswer => this.getAnswer(getAnswer)}
          ></Question>
        </Router>
      </div>
    );
  }
}

export default App;

Answer 1

Не сработало, может кто-нибудь помочь переписать этот метод. postAnswer

 postAnswer(questionID, name) {
    const answerObject = {
      name: name,
      id: questionID
    };
    this.setState({
      answers: [...this.state.data.find(x => x.id === questionID), answerObject]
    });

    //console.log(questionID, name);
  }

Answer 2

Все, что вам нужно, чтобы отслеживать вашу петлю. Предположим, что data является объектом.

let data = {
  data: [
    {
      id: 1,
      name: "nd time giving error,during TENSORFLOW execution",
      answers: [
        {
          name: "Observables are lazy so you have to subscribe to get the value.",
          votes: 5
        },
        { 
          name: "You can use asyncPipe", 
          votes: -2 
        },
        {
          name: "The reason that it's undefined is that you are making an",
          votes: 3
        }
      ]
    }
  ]
}

Теперь вам нужно добавить некоторое значение в первый объект массива ответов. Вы можете сделать это следующим образом: свойство

for(let obj of data.data) {
  obj.answers[0]['isData'] = true;
  console.log(obj.answers[0]);
}

isData будет добавлено в obj.answers [0].

И если вам нужно обновить существующие name или vote свойство, просто переопределите их.

for(let obj of data.data) {
  obj.answers[0]['name'] = 'new name';
}