在反应js中获取json

Question

    //CODE
    
    import React, { Component } from "react";
import ReactDOM from "react-dom";
import ColumnResizer from "column-resizer";
import "./table.css"
import axios from "axios";



class ReactTable extends Component {
  constructor(props) {
    super(props);
    this.tableSelector = "#somethingUnique";
    this.state = {
      Data: [],
      Data1: [],
      error: '',
      image: [],
    }
  }    
  //Fetching Api through LocalHost8080
  getFetchData() {
    axios.get(' /AmpRestAPI/webresources/getPCRList/all',
      {
        headers: {
          'Access-Control-Allow-Origin': '*',
        },
        auth: {
          username: 'admin',
          password: 'password'
        }
      })
      .then(async (response) => {
        console.log(response.data);
        this.setState({ Data: response.data });

      }).catch(error => {
        this.setState({ error: 'unable to fetch URL' });
        console.log(error.response);
      });
  }          
  componentDidMount() {    
    if (this.props.resizable) {
      this.enableResize();
      this.getFetchData();
    }
  }

  componentWillUnmount() {

    if (this.props.resizable) {
      this.disableResize();
    }
  }

  componentDidUpdate() {
    if (this.props.resizable) {
      this.enableResize();
    }
  }

  UNSAFE_componentWillUpdate() {
    if (this.props.resizable) {
      this.disableResize();
    }
  }

  enableResize() {
    const options = this.props.resizerOptions;
    if (!this.resizer) {
      this.resizer = new ColumnResizer(
        ReactDOM.findDOMNode(this).querySelector(`${this.tableSelector}`),
        options
      );
    } else {
      this.resizer.reset(options);
    }
  }

  disableResize() {
    if (this.resizer) {
      this.resizer.reset({ disable: true });
    }
  }

  render() {
    const { Data, error } = this.state
    return (
      <div>

        <div className="container-fluid pt-3">
          <table id="somethingUnique" cellSpacing="0" className="border-primary">
            <thead>
              <tr>
               <th>Thumbnail</th>
                <th >ChannelName
               </th>
                <th>Duration
                </th>
                <th>
              thEndTime
              </th>
                <th>LoadedClip</th>
                <th>Start Time</th>
                <th>CurrentTimeStamp
                </th>
              </tr>
            </thead>
            <tbody>
              {Data.length ?
                Data.map((val, index) => {
                  //flitter
                  const filterValue = this.props.filterValue;
                  const emplogin = val.ChannelName.toLowerCase();
                  // const emptype = emp.type;
                  if (((!filterValue) || (emplogin.indexOf(filterValue) !== -1))) {
                    return (
                      <tr key={index}>
                        <td>
                          {this.state.image ? <img src={`data:image/jpeg;base64,${val.Thumbnail}`} alt="Clip Thumbnail" width="100%" height="100%" /> : ''}
                        </td>
                        <td>
                            {val.ChannelName}
                         </td>
                        <td>{val.Duration}  </td>                       
                          <td>  {val.EndTime}
                          </td>
                        <td>
                            {val.LoadedClip}
                         </td>
                        <td>
                            {val.StartTime}
                         </td>

                        <td>
                            {val.CurrentTimeStamp}
                        </td>
                      </tr>
            )
                  }
            return true;
                }
            ) : null
              }
          </tbody>
        </table>
        {
          error ? <div className="text-center pt-4"><h5>{error}</h5></div> : null
        }
      </div >
      </div >
    );
  }
}

export default ReactTable;
    

    I want to fetch both PCR1 and PCR2 without using a spread operator. If the admin added PCR3 then that part also be displayed in a Web browser. See in the given name(Console Image). If the admin Added more PCR then how to fetch that data .please help
    
    I did this.setState({ Data: response.data }); to show PCR1 AND PCR2 in Table but not able to display.
    **without using Spread Operator  this.setState({Data: [...response.data.PCR1, ...response.data.PCR2]});** thanks in advance 
    
      [1]: https://i.stack.imgur.com/VkZDw.png

我做了 this.setState({ Data: response.data });在表中显示 PCR1 和 PCR2 但无法显示。 不使用扩展运算符 this.setState({Data: [...response.data.PCR1, ...response.data.PCR2]}); 提前谢谢我做了 this.setState({数据：response.data });在表中显示 PCR1 和 PCR2 但无法显示。 不使用扩展运算符 this.setState({Data: [...response.data.PCR1, ...response.data.PCR2]});提前致谢

Answer 1

试试这个：

this.setState({Data: [...Object.values(response.data).flat()]});