Question

我的componentDidUpdate总是在更新render（）/ state时遇到问题。

默认情况下，我所在的州有appendersData

this.state = {
  applicantsData: []
};

ComponentDidMount和ComponentDidUpdate调用我的方法来加载状态数据

componentDidMount() {
    this.getApplicants();
  }

  componentDidUpdate(prevProps) {
      // needs to be a unique value
      if (prevProps.applicantsData !== this.props.applicantsData) {
        this.getApplicants();
      }
  }

  getApplicants = async () => {
    AsyncStorage.getItem('CurrentPropertyID')
      .then((value) => {
        const propID = JSON.parse(value);
        this.props.getApplicants(propID);
        this.setState({ applicantsData: this.props.applicantsData });
    });
  }

然后，我有一个搜索框和一个FlatList来创建我的组件。我正在使用react-native-search-box'作为搜索框

<Search
   ref="search_box"
   onSearch={this.onSearch}
   onChangeText={this.onChangeText}
/>
<FlatList
   extraData={this.state}
   data={this.state.applicantsData}
   keyExtractor={(item) => {
       return item.id.toString();
   }}
   renderItem={this.renderItem}
/>

我的onChangeText方法：

onChangeText = (searchText) => {
    return new Promise((resolve) => {
      let data = this.props.applicantsData;
      if (searchText !== '') {
        data = data.filter((item) =>
          item.name.toUpperCase().includes(searchText.toUpperCase()) ||
          item.Email.toUpperCase().includes(searchText.toUpperCase()) ||
          item.Phone.toUpperCase().includes(searchText.toUpperCase())
        ).map(({ id, name, dtEntered, approve, Email, Phone, image }) =>
              ({ id, name, dtEntered, approve, Email, Phone, image }));
        this.setState({ applicantsData: data });
      } else {
        this.setState({ applicantsData: this.props.applicantsData });
      }
      resolve();
    });
  }

一切正常。数据被加载并显示在屏幕上。但是，componentDidUpdate被称为所有名称并不断更新道具，因此当我使用搜索框过滤我的state.applicantsData时，它会被快速过滤，然后再次加载所有数据，因为this.getApplicants在内部被调用componentDidUpdate（）。

这有意义吗？我该如何解决这个问题？

谢谢

Answer 1

这是问题所在。

componentDidUpdate(prevProps) {
      // needs to be a unique value
      if (prevProps.applicantsData !== this.props.applicantsData) {
        this.getApplicants();
      }
  }

您必须使用深度比较方法来比较申请人数据。您可以从lodash使用https://www.npmjs.com/package/deep-equal或isEqual

使用componentDidUpdate

1 个答案: