Reactjs react native中的FlatList未呈现来自状态的数据
FlatList未从状态呈现数据，但它正在为数据变量工作Reactjs react native中的FlatList未呈现来自状态的数据,reactjs,react-native,react-native-flatlist,Reactjs,React Native,React Native Flatlist,FlatList未从状态呈现数据，但它正在为数据变量工作this.state.DATA是一个与数据变量类似的对象数组。数据变量只是在本机文档中给定的一个伪变量。我想显示this.state.DATA的内容 import React, { Component } from 'react'; import { Text, View ,FlatList} from 'react-native'; import SectionHeader from '../SectionHeader'; import
this.state.DATAthis.state.DATAimport React, { Component } from 'react';
import { Text, View ,FlatList} from 'react-native';
import SectionHeader from '../SectionHeader';
import {TableHeader,TableHeaderText,IssueContainer} from './style';
import {CheckOutlined,InfoCircleOutlined,CaretDownOutlined} from '@ant-design/icons'
const DATA = [
{
id: '1',
title: "No show password eye button in Login form",
},
{
id: '2',
title: 'Second Item',
},
{
id: '3',
title: 'Third Item',
},
];
var repos=[],issues=[];
export default class App extends Component {
state={isLoading:true};
componentDidMount() {
fetch('https://api.github.com/orgs/anitab-org/repos')
.then((response)=>response.json())
.then((json)=> json.forEach(function(repo,idx){
repos.push(repo.name);
fetch('https://api.github.com/repos/anitab-org/'+repo.name+'/issues')
.then((response)=>response.json())
.then((json)=>json.forEach(function(issue,idx){
var flag=false;
var issue_tmp={
id:issue.id.toString(),
url:issue.html_url,
title:issue.title,
milestones:issue.milestones,
comments:issue.comments,
number:issue.number,
assignees:issue.assignees,
labels:[],
};
issue.labels.forEach(function(label){
if(label.name==="First Timers Only")
flag=true;
issue_tmp.labels.push({
id:label.id,
name:label.name,
color:label.color
})
})
if(flag===true && issue_tmp!=null)
issues.push(issue_tmp)
}));
}))
.then(()=>{
this.setState({
repos:repos,
DATA:issues,
isLoading:false,
});
})
}
render() {
if(this.state.isLoading===true)
return(<></>)
else{
return (
<View style={{alignItems: 'left',width:'80%'}}>
<SectionHeader title="SOME COOL FIRST-TIME ISSUES TO WORK ON"/>
<TableHeader>
<TableHeaderText style={{color:'#000',textAlign:'left'}}><InfoCircleOutlined /> 5 Open</TableHeaderText>
<Text style={{flex:6,color:'#586069'}}><CheckOutlined /> 45 Closed</Text>
<TableHeaderText>Author <CaretDownOutlined /></TableHeaderText>
<TableHeaderText>Label <CaretDownOutlined /></TableHeaderText>
<TableHeaderText>Milestone <CaretDownOutlined /></TableHeaderText>
<TableHeaderText>Assignee <CaretDownOutlined /></TableHeaderText>
<TableHeaderText>Sort <CaretDownOutlined /></TableHeaderText>
</TableHeader>
<FlatList
data={this.state.DATA}
renderItem={({item})=>(
<IssueContainer key={item.id}><Text>{item.title}</Text></IssueContainer>
)}
keyExtractor={item => item.id}
/>
</View>
);
}
}
};
import React，{Component}来自'React'；
从“react native”导入{Text，View，FlatList}；
从“../SectionHeader”导入SectionHeader；
从“/style”导入{TableHeader，TableHeaderText，IssueContainer}；
从“@ant design/icons”导入{CheckOutlined、InfoCircleOutlined、CaretDownOutlined}
常数数据=[
{
id:'1'，
标题：“登录表单中不显示密码眼按钮”，
},
{
id:'2'，
标题：“第二项”，
},
{
id:'3'，
标题:"第三项",，
},
];
var回购=[]，发行=[]；
导出默认类应用程序扩展组件{
状态={isLoading:true}；
componentDidMount（）{
取（'https://api.github.com/orgs/anitab-org/repos')
.then（（response）=>response.json（））
.then（（json）=>json.forEach（函数（repo，idx）{
回购推送（回购名称）；
取（'https://api.github.com/repos/anitab-org/“+repo.name+”/issues'）
.then（（response）=>response.json（））
.then（（json）=>json.forEach（函数（问题，idx）{
var标志=假；
风险值问题={
id:issue.id.toString（），
url:issue.html\u url，
标题：issue.title，
里程碑：问题。里程碑，
评论：issue.comments，
编号：issue.number，
受让人：问题。受让人，
标签：[]，
};
issue.labels.forEach（函数（标签）{
if（label.name==“仅限首次使用”）
flag=true；
发布\u tmp.labels.push({
id:label.id，
name:label.name，
颜色：label.color
})
})
if（flag==true&&issue\u tmp！=null）
发布推送（发布\u tmp）
}));
}))
.然后（（）=>{
这是我的国家({
回购协议：回购协议，
数据：问题，
孤岛加载：false，
});
})
}
render（）{
if（this.state.isLoading==true）
返回（）
否则{
返回(
5开
45关闭
作者
标签
里程碑
受让人
分类
(
{item.title}
)}
keyExtractor={item=>item.id}
/>
);
}
}
};
then，然后执行带有setState
的.then((json)=> json.forEach(function(repo,idx){
// bunch of promises being executed here with some chained then blocks
// outer 'then' chain doesn't wait these promises to resolve
}))
.then(()=>{
// since the previous one doesn't wait its inner promises to execute
// this chained 'then' is executed without those promises return their values
this.setState({
repos:repos,
DATA:issues,
isLoading:false,
});
async/await state = {
isLoading: true,
repos: [],
DATA: [],
};
async componentDidMount() {
const repos = [];
try {
const response = await fetch('https://api.github.com/orgs/anitab-org/repos');
const jsonData = await response.json();
const DATA = await Promise.all(jsonData.map(async ({ name }) => {
repos.push(name);
const issuesResponse = await fetch(`https://api.github.com/repos/anitab-org/${name}/issues`);
const issuesJSON = await issuesResponse.json();
const repoIssues = issuesJSON.map(this.normalizeIssue);
return repoIssues.filter(issue => issue !== undefined);
}))
// DATA needs to be flat since it's an array of arrays
this.setState({
repos,
DATA: DATA.flat(),
isLoading:false,
})
} catch (error) {
console.log(error);
}
}
normalizeIssue = (issue) => {
let flag = false;
const issueNormalized = {
id:issue.id.toString(),
url:issue.html_url,
title:issue.title,
milestones:issue.milestones,
comments:issue.comments,
number:issue.number,
assignees:issue.assignees,
labels:[],
};
issue.labels.forEach(function(label){
if(label.name === "First Timers Only") flag = true;
issueNormalized.labels.push({
id:label.id,
name:label.name,
color:label.color
})
})
if(flag === true && issueNormalized !== null) return issueNormalized
}
请共享完整的代码，并说明您是如何实现它的？您需要提供其余的代码。否则，您只能猜测类中的
this.state.DATAthis.state={isLoading:true，DATA:[]}