React native 在react native的平面列表中获取问题_React Native_React Native Flatlist

React native 在react native的平面列表中获取问题

react-native

React native 在react native的平面列表中获取问题,react-native,react-native-flatlist,React Native,React Native Flatlist,我正在调用一个API，在其中并在flatlist中呈现它的数据，但我的flatlist按每个alphabat分别显示数据。它应该是一个完整的字符串 export default class LiveStream extends Component { constructor(props) { super(props); this.state = { videodata: [], }; } componentDidMount(search)

我正在调用一个API，在其中并在flatlist中呈现它的数据，但我的flatlist按每个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>
            );
          }}
        />
  }
}

导出默认类LiveStream扩展组件{
建造师（道具）{
超级（道具）；
此.state={
视频数据：[]，
};
}
组件安装（搜索）{
axios
.得到(
`https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCMmpLL2ucRHAXbNHiCPyIyg&eventType=live&type=video&key=AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI`,
)
。然后（（res）=>{
//console.log（res.data.items[0].id.videoId）；
这是我的国家({
videodata:res.data.items[0].id.videoId，
});
})
.catch（（错误）=>{
console.log（“未加载数据”）；
});
}
render（）{
console.log（this.state.videodata）；
const{videodata}=this.state；
返回(
{
控制台日志（项目）；
返回(
);
}}
/>
}
}

在console.log中，我得到了更改

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

到

改变

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

{
控制台日志（项目）；
返回(
改变
 this.setState({
          videodata: res.data.items[0].id.videoId,
        });

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

{
控制台日志（项目）；
返回(
不必要地使用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>
  }
}

导出默认类LiveStream扩展组件{
建造师（道具）{
超级（道具）；
此.state={
videodata:null，
};
}
组件安装（搜索）{
axios
.得到(
`https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCMmpLL2ucRHAXbNHiCPyIyg&eventType=live&type=video&key=AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI`,
)
。然后（（res）=>{
//console.log（res.data.items[0].id.videoId）；
这是我的国家({
videodata:res.data.items[0].id.videoId，
});
})
.catch（（错误）=>{
console.log（“未加载数据”）；
});
}
render（）{
console.log（this.state.videodata）；
const{videodata}=this.state；
返回(
{this.state.videodata！==null&&
}
}
}
在渲染数组中的单个项目时，不必要地使用平面列表，也会将数组转换为字符数组，这就是为什么在控制台中看到单个字符。
您只需要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>
  }
}

导出默认类LiveStream扩展组件{
建造师（道具）{
超级（道具）；
此.state={
videodata:null，
};
}
组件安装（搜索）{
axios
.得到(
`https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCMmpLL2ucRHAXbNHiCPyIyg&eventType=live&type=video&key=AIzaSyC59vOHzSFtEgvNbJORgf4hI97Is3nnsfI`,
)
。然后（（res）=>{
//console.log（res.data.items[0].id.videoId）；
这是我的国家({
videodata:res.data.items[0].id.videoId，
});
})
.catch（（错误）=>{
console.log（“未加载数据”）；
});
}
render（）{
console.log（this.state.videodata）；
const{videodata}=this.state；
返回(
{this.state.videodata！==null&&
}
}
}
但是视频数据
在你的状态下
对象只是一个字符串…当你把它传递给你的平面列表时
…它将被视为一个字符数组…这正是你在这里得到的啊，请…你能编辑我的代码吗…我将非常感谢你…我真的被困在这里，但是视频数据
在你的状态中e
对象只是一个字符串…当你将它传递给你的平面列表时，
…它将被视为一个字符数组…这正是你在这里得到的啊，请…你能编辑我的代码吗…我将非常感谢你…我真的被困在这里了，这可能也是真的…但我只是将我的状态设置为null，然后放置条件{this.state.videodata！==null&&（）}它的workedIt可能也是真的……但我只是将我的状态设置为null，然后将条件{this.state.videodata！==null&&（）}放在它工作的地方