Один из двух данных метода get - PullRequest
Новая
       26

Один из двух данных метода get

1 голос
/ 05 апреля 2019

У меня есть два отдельных метода получения axios, которые отображают данные ответа на отдельный объект данных.Затем я отображаю данные в рендере.Я хочу поместить данные из обеих осей в один объект, чтобы отобразить только один объект в рендере.Как я могу это сделать?

Функция получения одного из двух 

getData() {
  axios
    .get("http://localhost/GetAll?", {
      params: { rok: this.state.rok, idUchwaly: "1" },
      headers: { Authorization: "Bearer " + this.state.token }
    })
    .then(response =>
      response.data.map(data2 => ({
        IDA: `${data2.idZadania}`,
        idWersji: `${data2.idWersji}`,
        Dzial: `${data2.dzial}`
      }))
    )
    .then(data2 => {
      if (data2 == "") {
      } else {
        this.setState({ data2, isLoadingdane: true });
      }
    })
    .catch(error => this.setState({ error }));
}

Затем я отображаю данные в таблицу 

{this.state.isLoadingdane ? (
  data2.map(user2 => {
    const { IDA, idWersji, Dział } = user2;
    return (
      <tr id={IDA}>
        <td>
          <p>{idWersji}</p>
        </td>
        <td>
          <p>{Dzial}</p>
        </td>
      </tr>
    );
  })
) : (
  <tr>
    <td colSpan="3">
      <center>
        <p>Brak</p>
      </center>
    </td>
  </tr>
)}

Я хочу одну таблицу, в которой я мог быположить значения из обеих функций get

примерно так: {значение из getData} {значение из getData2}

Ответы [ 2 ]

0 голосов
/ 05 апреля 2019

Bartek, вам нужно отобразить результаты так: 

const first = [{
  x: 'x',
  y: 'y',
}];

const second = [{
  x: 'x',
  z: 'z',
}];

const all = first.map(o => ({ ...o, ...second.find(f => f.x === o.x)}));

console.log(all);
0 голосов
/ 05 апреля 2019

Вместо перевода ответа на запрос axios непосредственно в состояние, вы можете вернуть обещание и подождать, пока оба запроса завершатся с Promise.all, а затем объединить объекты в обоих массивах в один массив.

Пример 

class App extends React.Component {
  componentDidMount() {
    Promise.all([this.getData(), this.getData2]).then(([data1, data2]) => {
      this.setState({
        data2: data1.map((item, index) => ({ ...item, ...data2[index] })),
        isLoadingdane: true
      });
    });
  }

  getData = () => {
    return axios
      .get("http://localhost/GetAll?", {
        params: { rok: this.state.rok, idUchwaly: "1" },
        headers: { Authorization: "Bearer " + this.state.token }
      })
      .then(response =>
        response.data.map(data2 => ({
          IDA: `${data2.idZadania}`,
          idWersji: `${data2.idWersji}`,
          Dzial: `${data2.dzial}`
        }))
      );
  };

  getData2 = () => {
    return axios.get(/* ... */);
    // ...
  };

  render() {
    // ...
  }
}
...