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是否有更好的方法？

如果你们给我任何建议，我将不胜感激！

Answer 1

实际上，此组件处于适当情况。用于获取数据的异步函数位于单独的函数中。您可以在<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="cat_list"> <li> <input id="1" value="1" type="checkbox" class="chkbx" name="cat[]"> <label for="1" class="selectit">1</label> <ul class="children"> <li> <input id="11" value="11" type="checkbox" class="chkbx" name="cat[]"> <label for="11" class="selectit">11</label> <ul class="children"> <li> <input id="111" value="111" type="checkbox" class="chkbx" name="cat[]"> <label for="111" class="selectit">111</label> </li> <li> <input id="112" value="112" type="checkbox" class="chkbx" name="cat[]"> <label for="112" class="selectit">112</label> </li> </ul> </li> <li> <input id="12" value="12" type="checkbox" class="chkbx" name="cat[]"> <label for="12" class="selectit">12</label> </li> <li> <input id="13" value="13" type="checkbox" class="chkbx" name="cat[]"> <label for="13" class="selectit">13</label> </li> <li> <input id="14" value="14" type="checkbox" class="chkbx" name="cat[]"> <label for="14" class="selectit">14</label> </li> <li> <input id="15" value="15" type="checkbox" class="chkbx" name="cat[]"> <label for="15" class="selectit">15</label> <ul class="children"> <li> <input id="151" value="151" type="checkbox" class="chkbx" name="cat[]"> <label for="151" class="selectit">151</label> </li> <li> <input id="152" value="152" type="checkbox" class="chkbx" name="cat[]"> <label for="152" class="selectit">152</label> </li> </ul> </li> </ul> </li> </ul> <br/><br/> <input type='text' id='textbx' value='' />内部调用它，因此在第一次初始化时，它会在没有数据的情况下进行渲染。当异步函数获取数据时，将触发componentDidMount函数以使用数据进行另一个渲染。因此很明显，您看到setState两次，并且肯定有两个渲染。

为什么渲染两次？

1 个答案: