有没有办法从 json 中获取一个值作为 react native 中的变量

Question

I am trying to create an app in react native. I have information stored in a database. I use php to get the information for the database using a query.

I then use fetch to get the information and I am able to get the information and display it as text. I would like to have the data as a variable so that I can use it with react-native sound.

Here is my react native code

 constructor(props){ super(props); this.state = { playState:'paused', //playing, paused playSeconds:0, duration:0, FileUrlHolder: '' } this.sliderEditing = false; } componentDidMount(){ fetch('http://f10f7e2e.ngrok.io/Filter.php', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ // Getting the id. id: this.props.navigation.state.params.FlatListClickItemHolder }) }).then((response) => response.json()) .then((responseJson) => { this.setState({ FileUrlHolder: responseJson[0].FileUrl }); }).catch((error) => { console.error(error); }); } componentWillUnmount(){ play = async () => { if(this.sound){ this.sound.play(this.playComplete); this.setState({playState:'playing'}); }else{ const filepath = this.state.FileUrlHolder; console.log('[Play]', filepath); //Alert.alert('id ' + filepath); this.sound = new Sound(filepath, (error) => { if (error) { console.log('failed to load the sound', error); Alert.alert('Notice', 'audio file error. (Error code : 1)'); this.setState({playState:'paused'}); }else{ this.setState({playState:'playing', duration:this.sound.getDuration()}); this.sound.play(this.playComplete); } }); } }

My json looks like

 [{"FileUrl":"John_30th_sept_2018.mp3"}]

Answer 1

When you do response.json() , you get back an object that was created using the body of the response. In your case this object will be an array containing an object with a FileUrl property. You don't need to JSON.parse() it because it has already been parsed into an object, this is why you get an error. Your code should work, what exactly is the problem? Are you certain your backend is returning the correct data?