React Native如何将对象转为数组用map方法渲染账单列表

你遇到can't use map function in object报错是两个代码写法问题导致的：

• 状态初始值类型错误：bill、datebill两个状态的初始值设为了布尔值false，不是数组类型
• 存值逻辑错误：调用JSON.stringify把接口返回的数组转成了JSON字符串，布尔值、字符串类型都没有map数组方法，自然调用报错

1. 修正状态初始值 #

把两个账单相关状态的初始值改为空数组，保证整个生命周期里状态类型始终为数组：

// 原错误写法
// const [bill, setBill] = useState(false);
// const [datebill, setDateBill] = useState(false);

// 修改为
const [bill, setBill] = useState([]);
const [datebill, setDateBill] = useState([]);

2. 修正接口返回值的存储逻辑 #

接口返回的账单列表本身就是数组类型，不需要做JSON字符串转换，直接存入状态即可。两个接口请求的成功回调都要修改：
首先修改get_today方法里的存值逻辑：

.then((responseJson) => {
    console.log(responseJson);
    if(responseJson.status === 'success') {
        // 原错误写法 setBill(JSON.stringify(responseJson.list));
        // 注意：如果你的接口账单数组字段是bill不是list，这里改成responseJson.bill即可
        setBill(responseJson.list);
    } else {
        alert("fail");
    }
})

再修改get_calendar_day方法里的存值逻辑：

.then((responseJson) => {
    console.log(responseJson);
    if(responseJson.status === 'success') {
        // 原错误写法 setDateBill(JSON.stringify(responseJson.list));
        setDateBill(responseJson.list);
    } else {
        alert("fail");
    }
})

3. 替换原渲染逻辑，用map提取name、price字段渲染列表 #

React Native中不能直接把数组塞进Text组件渲染，遍历数组时要给每个列表项设置唯一key（可以用接口返回的id作为key），替换原来直接渲染{bill}的代码块：

{/* 原错误写法
<Text>
  {bill}
</Text>
*/}

{/* 修改为账单列表渲染 */}
<View style={{paddingHorizontal: 20}}>
  {bill.map((item) => (
    <View 
      key={item.id} 
      style={{
        flexDirection: 'row', 
        justifyContent: 'space-between', 
        paddingVertical: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0'
      }}
    >
      <Text>{item.name}</Text>
      <Text>{item.price}원</Text>
    </View>
  ))}
  {/* 空状态提示，无账单数据时展示 */}
  {bill.length === 0 && (
    <Text style={{textAlign: 'center', color: '#999', paddingVertical: 30}}>
      暂无当日消费记录
    </Text>
  )}
</View>

日历选择后得到的datebill列表渲染逻辑和上面完全一致，直接把遍历的数据源从bill换成datebill即可。

内容的提问来源于stack exchange，提问作者김소흥