реагируют. js - почему рендеринг два раза - PullRequest
Новая
       10

реагируют. js - почему рендеринг два раза

0 голосов
/ 26 апреля 2020

Я пытаюсь получить значение из массива. Проблема в том, что стоимость рендеринга два раза 1-й раз получает неопределенное значение, но 2-й раз кажется нормальным. Где я пропустил? Пожалуйста, смотрите консольный результат на скриншоте 

import React, { Component } from "react";
import axios from "./axios";
import ZingChart from "zingchart-react";

export default class Chart extends Component {
  state = {
    info: [],
  };

  componentDidMount() {
    axios
      .get(
        `https://api.wordpress.org/plugins/info/1.0/3r-elementor-timeline-widget.json/`
      )
      .then((res) => {
        this.setState({ info: res.data });
      });
  }

  constructor(props) {
    super(props);

    this.state = {
      config: {
        type: "bar",
      },
    };
  }

  render() {
    var values;
    const pluginInfo = this.state.info;
    if (pluginInfo !== undefined) {
      const ratings = Object.values(pluginInfo.ratings);
      values = ratings;
    }
    //var mySeries = [{ values: [1, 3, 8] }];
    var mySeries = [{ values: values }];
    console.log(mySeries); // 1st time get undefined array but 2nd time is ok. 

    return (
      <div>
        <ZingChart data={this.state.config} series={mySeries} />
      </div>
    );
  }
}

Ответы [ 2 ]

1 голос
/ 26 апреля 2020

Здесь происходит множество проблем, две основные из которых приводят к вашей проблеме:

  1. Вы устанавливаете состояние по умолчанию с помощью свойства класса, а затем немедленно стираете его в Конструктор класса (это означает, что состояние по умолчанию info равно undefined).
  2. Вы устанавливаете values на undefined по умолчанию при каждом рендеринге, когда компонент первый рендеринг this.state.info равен undefined поэтому values остается undefined, и вы продолжаете устанавливать его в mySeries, который затем впоследствии отображается в пользовательском интерфейсе.

Если вы не хотите выполнять рендеринг до того, как что-то, вместо этого визуализируйте компонент-заполнитель, например 

if (!values) return <p>Loading...</p>;

return (...) // render component with mySeries etc.
0 голосов
/ 26 апреля 2020

Поскольку он рендерит компонент, он переходит в componentDidMount и вызывает вашу функцию ax ios, которая является асинхронным c запросом. Затем он разрешает асинхронный запрос c через x промежуток времени и устанавливает состояние, которое вызывает повторную визуализацию.

Следовательно, он визуализируется дважды.

Вы устанавливаете значения, только если pluginInfo имеет значение определил, что это на втором рендере.

...