Получаю проблему в flatlist реагируют родные - PullRequest
Новая
       65

Получаю проблему в flatlist реагируют родные

0 голосов
/ 30 апреля 2020

Я вызываю API и в котором и отображаю его данные в плоском списке, но мой плоский список отображает данные по каждому алфавиту отдельно. Это должна быть полная строка. 

    export default class LiveStream extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videodata: [],
    };
  }

  componentDidMount(search) {
    axios
      .get(
        `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCMmpLL2ucRHAXbNHiCPyIyg&eventType=live&type=video&key=AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI`,
      )
      .then((res) => {
        // console.log(res.data.items[0].id.videoId);

        this.setState({
          videodata: res.data.items[0].id.videoId,
        });
      })
      .catch((error) => {
        console.log('Data not loaded');
      });
  }
  render() {
    console.log(this.state.videodata);
    const {videodata} = this.state;
    return (

        <FlatList
          data={videodata}
          renderItem={({item}) => {
            console.log(item);
            return (
              <View style={{justifyContent: 'center', flex: 1}}>
                <YouTube
                  videoId={item.concat('')}
                  play={true}
                  style={{height: 300, bottom: 20}}
                  apiKey={'AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI'}
                />
              </View>
            );
          }}
        />
  }
}

В console.log я получаю enter image description here

Ответы [ 2 ]

1 голос
/ 30 апреля 2020

Unnecessary use of FlatList поскольку вы визуализируете отдельный элемент внутри, также ваш массив преобразуется в массив символов, поэтому вы видите один символ в консоли. Вам нужен только id, поэтому вы можете получить идентификатор только из ответа и сохранить его в состоянии. Я сделал несколько изменений в вашем коде, надеюсь, он будет работать для вас. 

  export default class LiveStream extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videodata: null,
    };
  }

  componentDidMount(search) {
    axios
      .get(
        `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCMmpLL2ucRHAXbNHiCPyIyg&eventType=live&type=video&key=AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI`,
      )
      .then((res) => {
        // console.log(res.data.items[0].id.videoId);

        this.setState({
          videodata: res.data.items[0].id.videoId,
        });
      })
      .catch((error) => {
        console.log('Data not loaded');
      });
  }
  render() {
    console.log(this.state.videodata);
    const {videodata} = this.state;
    return (
              <View style={{justifyContent: 'center', flex: 1}}>
                 { this.state.videodata !== null &&
                <YouTube
                  videoId={item.concat('')}
                  play={true}
                  style={{height: 300, bottom: 20}}
                  apiKey={'AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI'}
                />
                }
              </View>
  }
}
1 голос
/ 30 апреля 2020

изменить 

 this.setState({
          videodata: res.data.items[0].id.videoId,
        });

на 

this.setState({
          videodata: res.data.items,
        });

изменить 

<FlatList
          data={videodata}
          renderItem={({item}) => {
            console.log(item);
            return (
              <View style={{justifyContent: 'center', flex: 1}}>
                <YouTube
                  videoId={item.concat('')}

на 

<FlatList
          data={videodata}
          renderItem={({item}) => {
            console.log(item);
            return (
              <View style={{justifyContent: 'center', flex: 1}}>
                <YouTube
                  videoId={item.id.videoId}

Надеюсь, это поможет!

...