React Native 如何在使用setState后调用组件？

juud5qan 于 2023-10-22 发布在 React

关注(0)|答案(2)|浏览(161)

我正在学习React Native，我的搜索栏有问题，我把我的代码放在这里。

export default SearchBar = ({ setPokemonDetails, pokemonsList }) => {

    const handlePokemonSearch = (text) => {
        const filteredItems = pokemonsList.filter(item => {
            return item.name.toLowerCase().includes(text.toLowerCase())
        })
        setPokemonDetails(filteredItems)
    }

    return (
        <View style={styles.container}>
            <TextInput style={styles.textInput} placeholder="Search Pokemon"
                onChangeText={(text) => {
                    handlePokemonSearch(text)
                }} />
        </View>
    );
}

这里是Home组件，我称之为de SearchBar组件：

export default function Home() {

const { pokemonDetails, setPokemonDetails, setIsLoading, isLoading, isError } = useFetchPokemons()

return (
    <View style={{ padding: 10 }}>
        <SearchBar setPokemonDetails={setPokemonDetails} pokemonsList={pokemonDetails} />
        <FlatList
            data={pokemonDetails}
            keyExtractor={(item) => item.name}
            renderItem={({ item }) => <Card pokemon={item} />}
        />
    </View>
);

}
这段代码工作了一半，因为它在你写的时候过滤得很好，但是，当你删除一些字母时，它不会再次过滤。举例来说：
我有一个数组与此pokemons：

沙尔曼德
夏默龙
喷火龙

如果我写'魅力'，搜索栏找到正确的只有2（Charmander和Charmeleon），但如果删除'm'字母，它不会显示3口袋妖怪再次和继续显示Charmander和Charmeleon。
有谁知道如何解决这个问题吗？

react-native

来源：https://stackoverflow.com/questions/77246185/how-do-i-call-a-component-after-use-setstate

2条答案

按热度按时间

o0lyfsai1#

我认为为了更好地诊断问题，我们需要看看您如何在主屏幕上调用SearchBar组件。是否是setPokemonDetails设置了pokemonsList的状态，导致了这个问题？例如，您可能不会使用两个单独的状态变量来存储PokemonList和PokemonDetails。

export default function MainScreen() {
  const [pokemonDetails, setPokemonDetails] = useState([]);
  const [pokemonsList, setPokemonsList] = useState([
    { name: 'Charmander' },
    { name: 'Charmeleon' },
    { name: 'Charizard' },
  ]);

  return (
    <View>
      <SearchBar setPokemonDetails={setPokemonDetails} pokemonsList={pokemonsList} />

      <FlatList
        data={pokemonDetails}
        keyExtractor={(item) => item.name}
        renderItem={({ item }) => (
          <View>
            <Text>{item.name}</Text>
          </View>
        )}
      />
    </View>
  );
}

我将在handlePokemonSearch中使用console.log（），看看pokemonsList和filteredItems如何随文本输入而变化。
希望这能在任何小的方面有所帮助！

赞(0）回复(0）举报 2023-10-22

pw136qt22#

当您setPokemonDetails(filteredItems)时，您永久地修剪了<SearchBar />在其pokemonsList prop中接收的列表。在搜索项目时，您不想改变列表，您只想呈现一个过滤后的视图。因此，与设置列表本身不同，您需要跟踪搜索文本的一段新状态并设置它。
例如：

export default SearchBar = ({ setSearchText, pokemonsList }) => {
    const handlePokemonSearch = (text) => {
        setSearchText(filteredItems);
    };

    return (
        <View style={styles.container}>
            <TextInput
                style={styles.textInput}
                placeholder="Search Pokemon"
                onChangeText={(text) => {
                    handlePokemonSearch(text);
                }}
            />
        />
    );
};

export default PokemonsList = ({ initialPokemonsList }) => {
    // For explicitness, setPokemonDetails is defined but unused
    const [pokemonsList, setPokemonDetails] = useState([])
    const [searchText, setSearchText] = useState("");

    const filteredItems = pokemonsList.filter((item) => {
        return item.name.toLowerCase().includes(searchText.toLowerCase());
    });

    return (
        <>
            <SearchBar setSearchText={setSearchText} />
            <PokemonsList pokemonsList={filteredItems} />
        </>
    )
}

赞(0）回复(0）举报 2023-10-22

我来回答

React Native 如何在使用setState后调用组件？

2条答案

相关问题

热门标签

最新问答