【发布时间】：2021-05-01 18:41:03
【问题描述】：
这应该是非常容易的事情，但我在这方面非常努力。我要做的就是从我的 api 调用中将 id 的 setState 设置为“results.id”。一旦它将状态更改为 api 内部的状态，我就可以成功打开 filmography api。我已经通过输入一个真实的 id 测试了 axios fetch url，它可以工作。所以我基本上是在尝试获取我从搜索中获得的 id，并用那个 id 更新 id 状态。如果我试图在错误的函数中设置状态，那么一定要帮助我在正确的函数中使用它！ （我也知道我有一些草率的代码，但其中很多都是我的个人笔记，直到我准备好保存它为止）
import React, { useState } from "react";
import {
View,
TextInput,
Button,
Text,
ActivityIndicator,
ScrollView,
Image,
TouchableHighlight,
Alert,
} from "react-native";
import Modal from "react-native-modal";
import axios from "axios";
export default function Screen4() {
// id is a 2 digit number for specific actor const apiurl5 = "http://api.tmdb.org/3/search/person?api_key=84c329a92566be57845322a19ff707ac&query=" const apiurl4 = "/movie_credits?api_key=84c329a92566be57845322a19ff707ac&language=en-US" const apiurl3 = "https://api.themoviedb.org/3/person/" const apiurl2 = "https://api.themoviedb.org/3/movie/upcoming?api_key=84c329a92566be57845322a19ff707ac&language=en-US&page=1"; const apiurl = "http://www.omdbapi.com/?apikey=7ad73765&"; const [state, setState] = useState({ s: "Enter an actor...", id: "", results: [], selected: [], modalVisible: false, modalVisible2: false });
const search = () => {
// apiurl + "&t=" + state.s (Single Result)
// apiurl + "&s=" + state.s (Multiple Results)
axios(apiurl5 + state.s).then(({ data }) => {
//let results = [data]; ----- ******** Use this for &t= **************** -------------
//let results = data.Search; ----- ******** Use this for &s= **************** -------------
let results = data.results;
let id = state.id;
setState((prevState) => {
return { ...prevState, modalVisible: true };
}),
setState((prevState) => {
return { ...prevState, results: results };
}),
setState((prevState) => {
return { ...prevState, id: id };
}),
Alert.alert("The ID is: ", id, [
{ text: "Close", onPress: () => console.log("alert closed") },
]);
});
};
const openPopup = () => {
axios(apiurl3 + state.id + apiurl4).then(({ data }) => {
let result = data.cast;
setState((prevState) => {
return { ...prevState, modalVisible2: true };
}),
setState((prevState) => {
return { ...prevState, selected: result };
});
});
};
return (
<View style={{ flex: 1, padding: 10, justifyContent: "center" }}>
<Text>Cinemaster!</Text>
<TextInput
style={{
borderBottomWidth: 1,
borderBottomColor: "#ff0000",
marginBottom: 20,
}}
onChangeText={(text) =>
setState((prevState) => {
return { ...prevState, s: text };
})
}
onSubmitEditing={search}
value={state.s}
/>
<Button onPress={search} title="Search"></Button>
{/* key=result.imdbID -
This gives multiple search results with the &s= is in the URL
key=result -
This gives the result with the &t= is in the URL */}
<Modal
//animationType="slide"
transparent={false}
//visible={(state.modalVisible)}
animationIn="slideInRight"
animationOut="slideOutLeft"
useNativeDriver={true}
isVisible={state.modalVisible}
>
<ScrollView>
{state.results.map((results, index) => (
<TouchableHighlight key={index}>
<View style={{ flex: 1, padding: 10, justifyContent: "center" }}>
<Button title="Full Filmography" onPress={openPopup}></Button>
<Text>Gender: {results.gender}</Text>
<Text>ID: {results.id}</Text>
{results.known_for.map((k, i) => (
<TouchableHighlight
key={i}
// onPress={() => openPopup()}
>
<View>
<Text>Title: {k.title}</Text>
<Image
source={{
uri:
"https://image.tmdb.org/t/p/original/" +
k.poster_path,
}}
style={{ width: 300, height: 500 }}
resizeMode="cover"
/>
</View>
</TouchableHighlight>
))}
{/* <Text>Title: {results.gender}</Text> -----THIS ALSO WORKS----- */}
{/* {dataItems.map((item, index) => (
<div key={index}>
<h1>{item.title}</h1>
{item.content.map((c, i) => (
<div key={i}>
<img src={c.imageUrl} />
<h3>{c.title}</h3>
<h3>{c.description}</h3>
<hr />
</div>
))}
</div>
))} */}
</View>
</TouchableHighlight>
))}
<Text
onPress={() =>
setState((prevState) => {
return { ...prevState, modalVisible: false };
})
}
style={{
marginTop: 50,
color: "red",
fontSize: 40,
fontWeight: "bold",
}}
>
Close!
</Text>
</ScrollView>
</Modal>
{/* animationType in Modal can be fade, none, or slide */}
<Modal
//animationType="slide"
transparent={false}
//visible={(state.modalVisible)}
animationIn="slideInRight"
animationOut="slideOutLeft"
useNativeDriver={true}
isVisible={state.modalVisible2}
>
<ScrollView>
{state.selected.map((cast, index2) => (
<View key={index2}>
<Text>Title:{cast.title} </Text>
<Text>Overview:{cast.overview} </Text>
</View>
))}
</ScrollView>
<TouchableHighlight
onPress={() =>
setState((prevState) => {
return { ...prevState, modalVisible2: false };
})
}
>
<Text
style={{
marginTop: 50,
color: "red",
fontSize: 40,
fontWeight: "bold",
}}
>
Close!
</Text>
</TouchableHighlight>
</Modal>
</View>
);
}
results.id 的 API： http://api.tmdb.org/3/search/person?api_key=84c329a92566be57845322a19ff707ac&query=tom%20hanks
附上一张图片，显示我试图在PhoneExample中设置状态的ID
【问题讨论】：
标签： react-native api setstate