Question

我有一个对象，我想将对象数据附加到一个数组中。

截至目前，我得到了类似的东西

这是一个多嵌套的数组，很难获得数组的长度计数或映射数据。我希望所有数据都在一个数组中。

数据结构

[
  [
    {
      "startTime": 1562273706436,
      "endTime": 1562273706530,
      "url": "http://localhost:3005/logtofile",
      "method": "get",
      "status": 200,
      "duration": "0:0094"
    }
  ],
  [
    [
      {
        "startTime": 1562273706436,
        "endTime": 1562273706530,
        "url": "http://localhost:3005/logtofile",
        "method": "get",
        "status": 200,
        "duration": "0:0094"
      }
    ],
    {
      "value": "blah blah",
      "name": "John"
    }
  ],
  [
    [
      {
        "startTime": 1562273706436,
        "endTime": 1562273706530,
        "url": "http://localhost:3005/logtofile",
        "method": "get",
        "status": 200,
        "duration": "0:0094"
      }
    ],
    [
      [
        {
          "startTime": 1562273706436,
          "endTime": 1562273706530,
          "url": "http://localhost:3005/logtofile",
          "method": "get",
          "status": 200,
          "duration": "0:0094"
        }
      ],
      {
        "value": "blah blah",
        "name": "John"
      }
    ],
    {
      "value": "blah blah",
      "name": "John"
    }
  ]
]

我正在使用react，对不起，如果代码看起来有些混乱，我试图在数组中传递值[0]，等等。

App.js

class App extends Component {
  state = {
   logData: [],
   url: 'http://localhost:3005/logtofile', // only logs if the url end point is consistent with the service end point
   show:false
  };
 componentWillMount() {
    const retrieveLogs = {
      method: "GET",
      url: this.state.url, 
    }
    consume.fetch(retrieveLogs)
      .then( async (res) => {
        const logData = [
          {
            startTime: res.logger[0].startTime,
            endTime: res.logger[0].endTime,
            url: res.logger[0].url,
            method: res.logger[0].method,
            status: res.logger[0].status,
            duration: res.logger[0].duration,   
          }
        ]
        console.log(logData);
        await this.setState({
            logData: [...this.state.logData, logData]
         })
        console.log(this.state.logData)
    })
  }
  onAddData = (e) => {
    e.preventDefault();
    const value = {
      value:"blah blah",
      name:"John"
    }
    const postLogs = {
      method:"POST",
      url: this.state.url,
      data: [...this.state.logData, value]
    }
    consume.fetch(postLogs).then( (res) => {
      this.setState({
        logData: [...this.state.logData, res.data.data]
      })
    })
  }
  componentDidUpdate(prevProps){
    if(this.state.logData.length !== 0 && prevProps.logData === null){
      this.setState({
        show:true
      })
    }
    console.log(this.state.logData); // gets multinested arrays. 
  }
 ........
export default App;

Answer 1

使用Array.prototype.flat（）展平您的数组（或者，如果您担心浏览器的兼容性，请使用库或您自己的函数）。
过滤结果数组中的日志

let data = [
  [
    {
      "startTime": 1562273706436,
      "endTime": 1562273706530,
      "url": "http://localhost:3005/logtofile",
      "method": "get",
      "status": 200,
      "duration": "0:0094"
    }
  ],
  [
    [
      {
        "startTime": 1562273706436,
        "endTime": 1562273706530,
        "url": "http://localhost:3005/logtofile",
        "method": "get",
        "status": 200,
        "duration": "0:0094"
      }
    ],
    {
      "value": "blah blah",
      "name": "John"
    }
  ],
  [
    [
      {
        "startTime": 1562273706436,
        "endTime": 1562273706530,
        "url": "http://localhost:3005/logtofile",
        "method": "get",
        "status": 200,
        "duration": "0:0094"
      }
    ],
    [
      [
        {
          "startTime": 1562273706436,
          "endTime": 1562273706530,
          "url": "http://localhost:3005/logtofile",
          "method": "get",
          "status": 200,
          "duration": "0:0094"
        }
      ],
      {
        "value": "blah blah",
        "name": "John"
      }
    ],
    {
      "value": "blah blah",
      "name": "John"
    }
  ]
]

function isLog(objParam){
 	if(!objParam.hasOwnProperty("startTime"))
  	return false;
  if(!objParam.hasOwnProperty("endTime"))
  	return false;
  if(!objParam.hasOwnProperty("url"))
  	return false;
  if(!objParam.hasOwnProperty("method"))
  	return false;
  if(!objParam.hasOwnProperty("status"))
  	return false;
  if(!objParam.hasOwnProperty("duration"))
  	return false;
    
   return true;
}

data.flat(10)
console.log(data.flat(10))

Answer 2

重组了代码，现在可以正常工作了。

onAddData = (e) => {
  e.preventDefault();
  const value = {
    value:"blah blah",
    name:"John"
  }
  const postLogs = {
    method:"POST",
    url: this.state.url,
    data: {value: "more value"}
  }
  consume.fetch(postLogs).then( (res) => {
    this.setState({
      // flat takes the array out of the array
      logData: [...this.state.logData.flat(), res.logger[0]] // appends each log to an array 
    })
  })
}
componentDidUpdate(prevProps){
  if(this.state.logData.length !== 0 && prevProps.logData === null){
    this.setState({
      show:true
    })
  }
  console.log(this.state.logData);
}

将数据追加到一个数组中，而不是具有多个嵌套数组

2 个答案: