无法在 FlatList 上显示获取的数据

Question

我正在根据用户输入的搜索词使用 Axios 获取数据。当我 console.log 响应时；数据看起来不错。我还将响应分配给状态和 console.log 该状态也成功。但是每当我想在 FlatList 组件上显示数据时，就会出现列表项，但列表项是空的。而且列表项的数量与数据不相等，这是另一个问题。

我的代码如下。我尝试将 FlatList 的“extraData”属性更改为

search

和

searchResults

，但没有帮助。

顺便说一句，当我完全删除 useEffect 挂钩并给出静态状态时，它会按预期显示静态数据。

  const [search, setSearch] = useState("");
  const [searchResults, setSearchResults] =  useState(null);

  useEffect(() => {
    axios
    .get(
      `http://BASE_URL/api/${props.categoryName}/${search}`
    )
    .then((response) => {
      setSearchResults(response.data.result);
      
    })
    .catch((error) => {
      console.log(error);
    });
    console.log(searchResults);
  }, [search]);

.
.
.

<FlatList
extraData={search}
keyboardShouldPersistTaps={"always"}
style={styles.list}
data={searchResults}
renderItem={({ item }) => (
    <Pressable
         style={[styles.item, props.itemStyle]}
         onPress={() => onSelect(item)}>
         <Text style={[styles.itemText, props.itemTextStyle]}>
            {item.Name}
         </Text>
    </Pressable>
  )}
/>

此外，这是当我在搜索栏中输入“god”时我在控制台上看到的响应：

[{"Id":2,"Name":"The Godfather","Year":1972},{"Id":4,"Name":"The Godfather Part II","Year":1974}]

Answer 1

我改变了

setSearchResults(response.data.result);

与

setSearchResults((prevResults) => JSON.parse(response.data.result));

问题就解决了！