0

反応ネイティブでアプリを作成しようとしています。データベースに情報を保存しています。php を使用して、クエリを使用してデータベースの情報を取得します。

次に、fetch を使用して情報を取得すると、情報を取得してテキストとして表示できます。反応ネイティブサウンドで使用できるように、データを変数として使用したいと思います。

これが私の反応するネイティブコードです

  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);
              }
          });    
      }
  }

私のjsonは次のようになります

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

4

1 に答える 1

1

を実行するresponse.json()と、レスポンスの本文を使用して作成されたオブジェクトが返されます。あなたの場合、このオブジェクトは、プロパティを持つオブジェクトを含む配列になりFileUrlます。JSON.parse()すでにオブジェクトに解析されているため、必要ありません。これがエラーが発生する理由です。あなたのコードは動作するはずですが、正確には何が問題なのですか? バックエンドが正しいデータを返していると確信していますか?

于 2019-12-21T15:59:34.763 に答える