React Native Handle 嵌套对象与地图和显示

Question

如何处理带有地图的嵌套对象以在 React Native 中显示在平面列表或文本或其他组件上。我尝试使用文本和平面列表显示但没有用，我想这样显示

这是我的代码，

const Schedule = () => {
const [resp, setData] = useState([]);
 useEffect(() => {
      const fetchData = async () => {
        const respData1 = await axios(
          `http://sh3ll.my.id/api/data3.json`
        );  
        setData({ data: respData1.data.data });  
      };
        fetchData();
    },[]);

    console.log('render');
    if (resp.data) {
      console.log("d==>", resp);
    }

    return (
       <View style={{paddingTop:20}}>
            { resp.data && resp.data.map((items,i)=> 
                <Text key={i}>{`${items.date} ${items.time}`}
                  {items.list.map((sub)=>{ `${sub.description}`
                  })}
                </Text> 
             ) }
        
        {/* <FlatList data={resp} 
        keyExtractor={(x,i)=>i}
        renderItem={({item})=>
        ....?? }
        /> */}

      </View>
    )
}

export default Schedule

Answer 1

查看您的代码，我假设您的数据对象如下所示：

const resp = {
    data: [
      {
        date: "date 1",
        time: "time 1",
        list: [{ description: "desc 1" }, { description: "desc 2" }]
      },
      {
        date: "date 2",
        time: "time 2",
        list: [{ description: "desc 1" }, { description: "desc 2" }]
      }
    ]
  };

如果这是正确的，您可以通过调用您自己的“createDescription”函数来展平您的对象，该函数将负责渲染描述：

function createDescription(listItem) {
    return <p>{listItem.description}</p>;
}

  return (
    <table style={{ paddingTop: 20 }}>
      {resp.data &&
        resp.data.map((items, i) => (
          <tr key={i}>
            <td>{items.date}</td>
            <td>{items.time}</td>
            <td>{items.list.map((sub) => createDescription(sub))}</td>
          </tr>
        ))}
    </table>
  );

现在您的 HTML 已正确呈现，您可以使用 CSS 修复布局。

React Native Handle 嵌套对象与地图和显示

React Native Handle Nested Object with Map and Display

nested-loops

promise

react-native

react-native-flatlist