Reactjs React native make“；按钮“；从API动态地

我是React Native的新手，我一直在尝试创建一个视图，其中包含根据从API获取的数据动态创建的按钮数量

我的一个问题是返回的数据没有任何我可以指向的名称，比如

item.number

首先我试着做一个

，但我没有得到我想要的设计，像这样：

renderClientes = (numRows, data) => {
  console.log(numRows + "azxcvb");
  console.log(data.length + "render Clientes");

  return data.map((row, i) =>
    row.map((item, j) => (
      <TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }} key={`${i},${j}`}>
          <View style={{ flex: 1, justifyContent: 'center', marginLeft: 5 }}>
              <Text style={{ fontSize: 18, color: 'green' }}>
                  {item}
              </Text>
          </View>
      </TouchableOpacity>
    ))
  );
}

所以现在我试着用另一种方式来做，但我总是得到错误：

无法读取未定义的属性“0”

data.json:

{  
   "sEcho":0,
   "iTotalRecords":"75",
   "iTotalDisplayRecords":"73",
   "aaData":[  
      [  
         "1",
         "1",
         "Consumidor Final",
         "999999990",
         "",
         "",
         null,
         ", ",
         "21110000",
         "1",
         "1",
         "1"
      ],
      [  
         "2",
         "1000",
         "xxxxxx",
         "xxxxx",
         "",
         "",
         null,
         ", ",
         "xxxx",
         "15",
         "1",
         "1"
      ]
   ]
}

我如何获取数据

getClientes = async (token, opcao, search, pag, numRows) => {
  var url = "https://xxxx/xxxx/xxx/xxxx/xxx/tabelas/clientes?_token=" + token + "&opcao= " + opcao + "&search=&pag=&numRows=" + numRows;

  fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.aaData,
        isLoading: false,
        numRows: responseJson.iTotalDisplayRecords
      })

    console.log(responseJson.iTotalDisplayRecords + " total");
    console.log("CLIENTES: " + responseJson.aaData[0][2]);
    console.log(this.state.dataSource[0][2]);
  })
  .catch((error) => {
    console.log(error);
  })
}

如何渲染按钮：

renderClientes=（numRows，数据）=>{
log（numRows+“azxcvb”）；
console.log（data.length+“呈现客户”）；
常量视图=[]；
for（设i=0；i看起来您的
numRows
是
73
，但您的数组中只有两组行

通常，最好通过数组
.map
，这样它会自动遍历每个项目。类似如下：

renderClientes = (numRows, data) => {
  console.log(numRows + "azxcvb");
  console.log(data.length + "render Clientes");

  return data.map((row, i) =>
    row.map((item, j) => (
      <TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }} key={`${i},${j}`}>
          <View style={{ flex: 1, justifyContent: 'center', marginLeft: 5 }}>
              <Text style={{ fontSize: 18, color: 'green' }}>
                  {item}
              </Text>
          </View>
      </TouchableOpacity>
    ))
  );
}

renderClientes=（numRows，数据）=>{
log（numRows+“azxcvb”）；
console.log（data.length+“呈现客户”）；
返回data.map（（行，i）=>
行映射（（项目，j）=>(
{item}
))
);
}
您收到此错误

错误：无法读取未定义的属性“0”，因为您正在n个数字数组中循环n+1次

要解决此问题，只需按如下方式分配设置状态：

this.setState({
            dataSource: responseJson.aaData,
            isLoading: false,
            numRows: responseJson.iTotalDisplayRecords - 1
        })

正如Austin Greco已经指出的那样，我也会选择map，相信我，在React和JavaScript中使用数组时，它会使一切变得更容易。
首先是对API的建议：

let url=”https://clientes?_token=“+token+”&opcao=“；

永远不要在URL上发送令牌，因为破解它们非常容易。你可以在你的头上发送隐藏数据


正如@Austin Greco所说的
numRows
是
'73'
，但是您的数组只有两组行。我建议将
numRows
作为整数而不是字符串发送

此外，为了从数据构建复杂的接口，您应该使用有助于更好地描述数据的对象，而不是使用现有的数组（
aaData
）数组。请拍摄您向我们展示的图像：


您可以拥有如下对象：

{
燃气轮机：“燃气轮机2019/01”，
姓名：“路易斯·菲利佩·戈麦斯·罗德里格斯”，
总计：179,90欧元，
开放：是的，
nif:9999999，
日期：“2019年1月1日”，
}

而不是

arr=['GT2019/01'，'Luis Filipe Gomes Rodrigues'，'179,90€'，true，9999999999'，2019年1月'
name=arr[1]

因此，我花了一些时间为您制作了一种零食，以供后续跟进：它看起来像这样：

renderClientes = (numRows, data) => {
  console.log(numRows + "azxcvb");
  console.log(data.length + "render Clientes");

  return data.map((row, i) =>
    row.map((item, j) => (
      <TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }} key={`${i},${j}`}>
          <View style={{ flex: 1, justifyContent: 'center', marginLeft: 5 }}>
              <Text style={{ fontSize: 18, color: 'green' }}>
                  {item}
              </Text>
          </View>
      </TouchableOpacity>
    ))
  );
}


包装代码：

import React，{Component}来自'React'；
进口{
看法
文本，
形象,，
样式表，
可触摸不透明度，
尺寸，
滚动视图，
}从“反应本机”；
从“@expo/vector icons”导入{AntDesign}；
从“/data.js”导入数据；
导出默认类StackOverflowAnswer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：数据，
孤岛加载：false，
};
}
renderClientLeft（客户端）{
返回(
GT{client.GT}
{client.name}
NIF:{client.NIF}
数据：{client.date}
);
}
renderClientRight（客户端）{
让hoursColor=client.open？“#588f40”：“#4973a3”；
让hoursText=client.open？'Aberto'：'Fechado'；
返回(
总数：
{client.total}
{hoursText}
);
}
renderClient（客户端）{
返回(
{this.renderClientLeft（客户端）}
{this.renderClientRight（客户端）}
);
}
renderclients=客户端=>{
返回clients.map（（client，i）=>{
返回(
{this.renderClient（客户端）}
);
});
};
render（）{
const{data}=this.state；
返回(
{this.renderClientes（数据）}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#ededed”，
玛金托普：20，
对齐项目：“居中”，
},
客户端容器：{
宽度：尺寸。获取（“窗口”）。宽度*0.95，
边框宽度：1，
边框颜色：'#000000'，
阴影颜色：“#000”，
阴影偏移：{宽度：0，高度：2}，
阴影不透明度：0.4，
阴影半径：1，
背景颜色：“#ffffff”，
},
客户：{
flexDirection:'行'，
边界半径：1，
差额：4，
},
客户左：{
宽度：“60%”，
第五名：，
},
clientRight：{
justifyContent:'之间的空间'，
flexDirection:'行'，
高度：“100%”，
宽度：“40%”，
},
燃气轮机：{
重量：'700'，
颜色：“#bf5e2a”，
差额：2，
},
姓名：{
重量：'700'，
差额：2，
},
日期：{
颜色：“#8a8a8a”，
差额：2，
},
箭头容器：{
为内容辩护：“中心”，
对齐项目：“居中”，
},
totalVal：{
颜色：“#bf5e2a”，
边缘左：10，
},
总数：{
flexDirection:'行'，
},
工作时间：{
宽度：“70%”，
为内容辩护：“中心”，
对齐项目：“居中”，
},
小时文字：{
颜色：“#ffffff”，
差额：5，
},
客户助理：{
marginBottom:5，
},
});