Блог

как обрабатывать вложенный объект с помощью карты для отображения в flatlist или text или другом компоненте в react native. я пытался отобразить с помощью text и flatlist, но не сработало, я хочу отображать так

это мой код,

 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 amp;amp; 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
 

Глядя на ваш код, я предполагаю, что ваш объект данных выглядит следующим образом:

 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 amp;amp;
        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.