#reactjs
#реагирует на
Вопрос:
Я хочу получить pcr1 и 2 в теле таблицы, я пытался, но не смог получить данные, пожалуйста, помогите новичку отреагировать, в настоящее время я пытаюсь создать таблицу данных с данными из API. Я хочу сначала запустить pcr1 в своей таблице, а затем запустить другую с таблицей ответов pcr2.
Вот Мой Код:
import React, { Component } from "react"; import ReactDOM from "react-dom"; import ColumnResizer from "column-resizer"; import "./table.css" import axios from "axios"; // https://api.github.com/users // http://localhost:8080/AmpRestAPI/webresources/getPCRList/all class ReactTable extends Component { constructor(props) { super(props); this.tableSelector = "#somethingUnique"; this.state = { api: [] } } componentDidMount() { // fetch('https://api.github.com/users').then(res =gt; res.json().then(result =gt; { // console.log(result); this.setState({ api: result }); // })) axios.get('/AmpRestAPI/webresources/getPCRList/all', { headers: { 'Access-Control-Allow-Origin': '*', }, auth: { username: password: } }).then(response =gt; { console.log(response); this.setState({ api: response.data.results }); }).catch(function (error) { console.log(error.response); }); if (this.props.resizable) { this.enableResize(); } } componentWillUnmount() { if (this.props.resizable) { this.disableResize(); } } componentDidUpdate() { if (this.props.resizable) { this.enableResize(); } } 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() { return ( lt;divgt; lt;div className="container-fluid example pt-3" gt; lt;table id="somethingUnique" cellSpacing="0" className="border-primary" style={{ fontSize: "100%" }}gt; lt;theadgt; lt;trgt; lt;thgt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="50" y="75%" fontSize="75" gt;Thumbnaillt;/textgt; lt;/svggt;lt;/thgt; lt;th gt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="0" y="75%" fontSize="75" gt;Clip Namelt;/textgt; lt;/svggt;lt;/thgt; lt;thgt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="50" y="75%" fontSize="75" fill="black" gt;Slog Namelt;/textgt; lt;/svggt;lt;/thgt; lt;thgt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="20" y="75%" fontSize="75" fill="black" gt;Channel Namelt;/textgt; lt;/svggt;lt;/thgt; lt;thgt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="50" y="75%" fontSize="75" fill="black" gt;Statuslt;/textgt; lt;/svggt;lt;/thgt; lt;thgt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="50" y="75%" fontSize="75" fill="black" gt;Looplt;/textgt; lt;/svggt;lt;/thgt; lt;thgt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="50" y="75%" fontSize="75" fill="black" gt;Start Timelt;/textgt; lt;/svggt;lt;/thgt; lt;thgt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="50" y="75%" fontSize="75" fill="black" gt;Durationlt;/textgt; lt;/svggt;lt;/thgt; lt;thgt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="35" y="75%" fontSize="75" fill="black" gt;Down Counterlt;/textgt; lt;/svggt;lt;/thgt; lt;thgt;lt;svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" gt;lt;text x="50" y="75%" fontSize="75" fill="black" gt;Up Counterlt;/textgt; lt;/svggt;lt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; { this.state.api ? this.state.api.map(item =gt; { }) : null } lt;/tbodygt; lt;/tablegt; lt;/div gt; lt;/divgt; ); } } export default ReactTable;
Как я могу выполнить этот вложенный запрос на извлечение?
Большое спасибо, как я могу выполнить этот вложенный запрос на извлечение?
Большое спасибо,
Комментарии:
1. Я не уверен, что понимаю. Я вижу только одну таблицу и один вызов API (
/AmpRestAPI/webresources/getPCRList/all
)2. { «PCR2»: [ { «Загруженный клип»: «Клип 0», «Тип ногтя»: «jpeg», «Время начала»: «:00:00» } ] «PCR1»: [ { «Загруженный клип»: «Клип 0», «Тип ногтя»: «jpeg», «Время начала»: «00:00», «Продолжительность»: «10:04»} ] } я хочу отобразить этот api данных в таблице
3. Я понимаю. Но в своем коде вы задаете переменную состояния
api
, какresponse.data.results
в то время как в JSON ее нетresults
. ЕстьRPC1
иRPC1
такие . В любом случае, если вы хотите объединить их в один массив для заполнения таблицы, вы можете использовать распространение, напримерthis.setState({api: [...response.data.RPC1, ...response.data.RPC2]})
4. спасибо вам за вашу помощь.
5. да, большое спасибо.