在 React Native 的平面列表中出现问题

Question

我正在调用一个 API 并在其中并在平面列表中呈现其数据，但我的平面列表正在分别显示每个 alphabat 的数据。它应该是一个完整的字符串。

    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 我得到

Answer 1

改变

 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}

希望对您有所帮助！

Answer 2

Unnecessary use of FlatList 当您在内部渲染单个项目时，您的数组也会转换为字符数组，这就是您在控制台中看到单个字符的原因。你只需要 id 所以你只能从响应中获取 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>
  }
}

在 React Native 的平面列表中出现问题

Getting problem in flatlist of react native

react-native

react-native-flatlist