Поиск элементов, хранящихся в хранилище asyn c

Question

У меня есть список элементов, отображаемых в плоском списке (карточке), хранящемся в хранилище asyn c, который я хотел бы искать с помощью панели поиска, я получаю данные для элементов (хранятся в хранилище asyn c) от это. штат. сохранено , как вы можете видеть в приведенном ниже коде

, по какой-то причине мой подход не работает, и я не могу понять почему? Прошу прощения за длинный код, любая помощь будет очень принята

class SaveSearchList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      temp: [],
      error: null,
      search: null,
      saved: [],
    };
  }
  removeItem = () => {
    DeleteItem("saved")
      .then((res) => {
        this.setState({
          saved: [],
        });
        console.log(res);
      })
      .catch((e) => console.log(e));
  };
  componentDidMount = () => {
    this.getData();
    this.readItems();
    this.unsubscribe = this.props.navigation.addListener(
      "focus",
      this.readItems
    );
  };
  componentWillUnmount() {
    this.unsubscribe();
  }
  readItems = () => {
    ReadItem("saved")
      .then((res) => {
        if (res) {
          const saved = JSON.parse(res);
          this.setState({
            saved: saved,
          });
        }
      })
      .catch((e) => console.warn(e));
  };
  getData = async () => {
    this.setState({ loading: true });

    try {
      this.setResult(this.state.saved);
    } catch (e) {
      this.setState({ error: "Error Loading content", loading: false });
    }
  };
  setResult = (res) => {
    this.setState({
      data: [...this.state.data, ...res],
      temp: [...this.state.temp, ...res],
      error: res.error || null,
      loading: false,
    });
  };

  renderHeader = () => {
    return (
      <View style={{}}>
        <Text
          style={{
            color: colors.shade2,
            fontSize: 30,
            fontWeight: "bold",
            textAlign: "center",
          }}
        >
          Browse Saved Articles
        </Text>
        <SearchBar
          containerStyle={{
            borderWidth: 1,
            borderRadius: 5,
            borderColor: "#353540",
            borderTopColor: "#353540",
            borderBottomColor: "#353540",
          }}
          inputContainerStyle={{ backgroundColor: colors.shade1 }}
          round
          showLoading
          placeholder="Search for articles"
          onChangeText={this.updateSearch}
          value={this.state.search}
        />
      </View>
    );
  };

  updateSearch = (search) => {
    this.setState({ search }, () => {
      if ("" == search) {
        this.setState({
          data: [...this.state.temp],
        });
        return;
      }

      this.state.data = this.state.temp
        .filter(function (item) {
          return item.title.includes(search);
        })
        .map(function ({ id, title, category, img, content }) {
          return { id, title, category, img, content };
        });
    });
  };

  render() {
    return this.state.error != null ? (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Text>{this.state.error}</Text>
        <Button
          onPress={() => {
            console.log("nothing");
          }}
          title="Reload"
        />
      </View>
    ) : (
      <View style={{ top: 50 }}>
        <FlatList
          style={{}}
          ListHeaderComponent={this.renderHeader}
          data={this.state.saved}
          keyExtractor={(item) => item._id}
          renderItem={({ item }) => {
            return (
              <TouchableScale
                activeScale={0.9}
                tension={50}
                friction={7}
                useNativeDriver
                onPress={() =>
                  this.props.navigation.navigate("DetailScreen", {
                    data: item,
                  })
                }
              >
                <View style={{ left: 10, top: 20 }}>
                  <Card item={item} />
                </View>
              </TouchableScale>
            );
          }}
        />
        <View style={styles.button}>
          {this.state.saved.length > 0 && (
            <AppButton
              title="Remove Key"
              color="secondary"
              onPress={this.removeItem}
            />
          )}
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  button: {
    top: 20,
    width: 300,
    height: 250,
    alignItems: "center",
    left: 40,
  },
});
export default SaveSearchList;

Answer 1

Если я вас правильно понял, вы загружаете все сохраненные элементы, а затем хотите отфильтровать их с помощью текста поиска (будут отображаться только элементы, релевантные для поиска).

Проблема в том, что изменение текста панели поиска изменил "this.state.data", в то время как данные плоского списка - "this.state.saved", который не изменяется после изменений текста поиска.

Для большей ясности я добавляю фрагмент кода I думаю, следует изменить.

Текущие:

updateSearch = (search) => {
    this.setState({ search }, () => {
      if ("" == search) {
        this.setState({
          data: [...this.state.temp],
        });
        return;
      }

      this.state.data = this.state.temp
        .filter(function (item) {
          return item.title.includes(search);
        })
        .map(function ({ id, title, category, img, content }) {
          return { id, title, category, img, content };
        });
    });
  };

и

...
...
  <FlatList
      style={{}}
      ListHeaderComponent={this.renderHeader}
      data={this.state.saved}
      keyExtractor={(item) => item._id}
      renderItem={({ item }) => {
        return (
          <TouchableScale
            activeScale={0.9}
            tension={50}
            friction={7}
 ...
 ...

Изменить на:

updateSearch = (search) => {
    this.setState({ search }, () => {
      if ("" == search) {
        this.setState({
          data: [...this.state.temp],
        });
        return;
      }

      this.setState({ data: this.state.temp
        .filter(function (item) {
          return item.title.includes(search);
        })
        .map(function ({ id, title, category, img, content }) {
          return { id, title, category, img, content };
        });
    });
  };

и

...
...
  <FlatList
      style={{}}
      ListHeaderComponent={this.renderHeader}
      data={this.state.data}                   <------------- CHANGED --------
      keyExtractor={(item) => item._id}
      renderItem={({ item }) => {
        return (
          <TouchableScale
            activeScale={0.9}
            tension={50}
            friction={7}
 ...
 ...

и

readItems = () => {
    ReadItem("saved")
      .then((res) => {
        if (res) {
          const saved = JSON.parse(res);
          this.setState({
            saved: saved, temp: saved, data: saved          //  <---------- CHANGED ----
          });
        }
      })
      .catch((e) => console.warn(e));
  };