Почему это рендеринг дважды?

Question

Что я хотел бы знать

Этот компонент React Native рендерит дважды. Я хочу знать, почему и если это плохой код.

export default class Items extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      items: [],
    };
  }

  fetchData = async () => {
    const querySnapshot = await Fire.shared.getItemsByGenres(1);
    const items = await Fire.shared.pushItems(querySnapshot);
    this.setState({ items });
  }

  componentDidMount() {
    this.fetchData();
  }

  _onRefresh() {
    this.setState({ refreshing: true });
    this.fetchData().then(() => {
      this.setState({ refreshing: false });
    });
  }

  render() {

  console.log('fire');

    const { items } = this.state;
    return (
      <Container>
        <Content
          refreshControl={(
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this._onRefresh.bind(this)}
            />
          )}
        >
        </Content>
      </Container>
    );
  }
}

console.log(); выводит дважды: (

Есть ли лучшие способы использования RefreshControl rol

Я бы Спасибо, если вы, ребята, дадите мне какой-нибудь совет!

Answer 1

На самом деле, этот компонент находится в надлежащей ситуации. асинхронная функция для получения данных находится в отдельной функции. Вы вызываете его внутри componentDidMount, поэтому при первой инициализации он рендерится без данных. Когда асинхронная функция получает данные, запускается функция setState, которая выполняет другой рендеринг с данными. Таким образом, очевидно, что вы видите вдвое больше console.log, и определенно у вас есть два рендера.