将对象更改为数组，并在React Native中使用MAP函数

Question

我从Django服务器获得列表响应。这就是Responsejson.bill在React Native中的样子

[
  {"ch": 0, "day": 9, "de": 0, "dr": 0, "en": 0, "etc": 1600, "id": 111, "ja": 0, "joy": 0, "ko": 0, "location": "경기 부", "month": 6, "mt": 0, "name": "삼계", "price": 1600, "shop": 0, "user_id_id": 2, "year": 2022},
  {"ch": 0, "day": 9, "de": 0, "dr": 0, "en": 0, "etc": 17, "id": 112, "ja": 0, "joy": 0, "ko": 0, "location": "경기 부개", "month": 6, "mt": 0, "name": "chicken", "price": 17, "shop": 0, "user_id_id": 2, "year": 2022}, 
  {"ch": 0, "day": 9, "de": 0, "dr": 0, "en": 0, "etc": 0, "id": 113, "ja": 0, "joy": 0, "ko": 18, "location": "경기 부개", "month": 6, "mt": 0, "name": "galbi", "price": 18, "shop": 0, "user_id_id": 2, "year": 2022}
];

，现在的“ Bill”类型是对象，我想更改为阵列并使用Map函数在屏幕上显示这些列表，

我只想将“名称”和“ Price”属性显示从列表中显示在屏幕上 我应该怎么办？

我尝试使用映射函数，但错误说“无法在对象中使用地图函数”

代码

import React, {useState, Component} from 'react';
import {Alert, View, Text, SafeAreaView, TextInput, StyleSheet, Image, Pressable, Dimensions, TouchableOpacity} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Modal from 'react-native-modal';
import {Calendar} from 'react-native-calendars'
import {
  LineChart,
  ProgressChart,
  ContributionGraph,
} from "react-native-chart-kit";


 const LedgerScreen = () => {
  const [bill, setBill] = useState(false);
  const [datebill, setDateBill] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);

  const get_today = async() => {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const day = now.getDate();

    const userData = await AsyncStorage.getItem('userData');
    const profile = JSON.parse(userData);

    fetch('http://13.209.105.69:8001/user/date/', {
    //fetch('http://localhost:8000/user/date/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: "Token " + profile.token,
      },
      body: JSON.stringify({
        year: year,
        month: month,
        day: day,
      })
    })
    .then((response) => response.json())
    .then((responseJson) => {
        console.log(responseJson);
        if(responseJson.status === 'success') {
              setBill(JSON.stringify(responseJson.list));
              //alert(bill);
        } else {
            alert("fail");
        }
    })
    .catch((error) => {
        console.error(error);
    });
  }

  const get_calendar_day = async(Date) => {
      const year = Date.year
      const month = Date.month
      const day = Date.day

      const userData = await AsyncStorage.getItem('userData');
      const profile = JSON.parse(userData);

      fetch('http://13.209.105.69:8001/user/date/', {
      //fetch('http://localhost:8000/user/date/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: "Token " + profile.token,
        },
        body: JSON.stringify({
          year: year,
          month: month,
          day: day,
        })
      })
      .then((response) => response.json())
      .then((responseJson) => {
          console.log(responseJson);
          if(responseJson.status === 'success') {
              setDateBill(JSON.stringify(responseJson.list));
          } else {
              alert("fail");
          }
      })
      .catch((error) => {
          console.error(error);
      });
  }

  return (
  <View>
    <Modal
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
            setModalVisible(!modalVisible);
        }}
    >
      <View style={styles.modalView}>
        <Calendar
            onDayPress={day => {
                get_calendar_day(day)
            }}
            style={styles.calendar}
            hideExtraDays={true}
        />
        <Pressable
            onPress={() => setModalVisible(!modalVisible)}
        >
            <Text style={styles.textStyle}>접기</Text>
        </Pressable>
      </View>
    </Modal>
    <View style={styles.view}>
      <Pressable
          onPress={() => setModalVisible(true)}
      >
          <Image
            source={require('../../Image/calendar.png')}
            style={styles.ImageIconStyle}
          />
      </Pressable>
      <TouchableOpacity
          onPress={() => get_today()}
      >
        <Text>오늘의 소비</Text>
      </TouchableOpacity>
    </View>
    <Text>
      {bill}
    </Text>
  </View>
  );
};

export default LedgerScreen;

const styles = StyleSheet.create({
  calendar: {
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
   modalView: {
      margin: 20,
      backgroundColor: "white",
      borderRadius: 20,
      padding: 35,
      alignItems: "center",
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 2
      },
      shadowOpacity: 0.25,
      shadowRadius: 4,
      elevation: 5
   },
   textStyle: {
      color: "black",
      textAlign: "center"
   },
   ImageIconStyle: {
        padding: 10,
        margin: 10,
        height: 25,
        width: 25,
   },
   view: {
     padding: 10,
     margin: 45,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   }
});

这是我尝试在此处使用映射函数的

<Text>
      {bill}
</Text>

Answer 1

从您显示为服务器的响应的数据中，默认类型是数组（对象数组），但是您将其转换为使用JSON.STRINGIFY进行测试。与其将其转换为字符串，不如将响应直接存储，因为

setBill(responseJson.list);

它现在将存储一个数组的响应（如果Responsejson.list是一个数组）。

之后，您可以直接使用地图功能而不是＆lt; text＆gt; {bill}＆lt;/text＆gt;

{bill.map((x, i) => {
    return <Text>{x.name} {x.price}</Text>
})}

再次取决于从服务器收到的数据。如果wongessjson.list默认为数组，则setBill将具有一个数组

Answer 2

无需将内部对象转换为数组。您可以在主数组上循环，然后使用MAP获得内部对象属性。

演示：

class LoopThrough extends React.Component {
  render() {
    return (
      <div>
        {this.props.bills.map(bill => (
          <li key={bill.id}>Name: <b>{bill.name}</b>, Price: <b>{bill.price}</b></li>
        ))}
      </div>
    );
  }
}

ReactDOM.render(
  <LoopThrough bills={[
  {"ch": 0, "day": 9, "de": 0, "dr": 0, "en": 0, "etc": 1600, "id": 111, "ja": 0, "joy": 0, "ko": 0, "location": "경기 부", "month": 6, "mt": 0, "name": "삼계", "price": 1600, "shop": 0, "user_id_id": 2, "year": 2022},
  {"ch": 0, "day": 9, "de": 0, "dr": 0, "en": 0, "etc": 17, "id": 112, "ja": 0, "joy": 0, "ko": 0, "location": "경기 부개", "month": 6, "mt": 0, "name": "chicken", "price": 17, "shop": 0, "user_id_id": 2, "year": 2022}, 
  {"ch": 0, "day": 9, "de": 0, "dr": 0, "en": 0, "etc": 0, "id": 113, "ja": 0, "joy": 0, "ko": 18, "location": "경기 부개", "month": 6, "mt": 0, "name": "galbi", "price": 18, "shop": 0, "user_id_id": 2, "year": 2022}
]} />,
  document.getElementById('container')
);

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="container">
</div>

Answer 3

一旦获取数据，我将像这样存储这样的元素

setBill(responseJson.list);

，然后将变量映射到这样的DOM。

    {bill.map((item, index)=>(

    <Text>{bill.name}</Text>
    ))}

最后，我将在听众等待账单价值的情况下添加使用效果

  useEffect(() => {

   //called functions on page load

  },[bill])