反应将数据插入嵌套数组

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

所有您需要跟踪的循环。认为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';
}

Answer 2

它没有用，有人可以帮忙重写此方法。 postAnswer

HTTPGatewayContext.getInvocationContext().getRequestHeaders()