Блог

Изучение react

Попытка перебрать объект из вызова API, который возвращает объект json, и отобразить его, но не удается его реализовать

Это компонент, который должен его отображать

     export default class ProfilePage extends Component {
  constructor() {
    super();
    this.state = { data: '' };
  }

  mapObject(object, callback) {
    return Object.keys(object).map(function (key) {
        return callback(key, object[key]);
      })

  }

  async componentDidMount() {
    const response = await fetch(`https://indapi.kumba.io/webdev/assignment`);
    const json = await response.json();
    // console.log(json)
    this.setState({ data: json });
    
  }

  

  render() {
    const data = this.state.data
    console.log(data)
    return (
      <div className="row">
          {Object.values(data).map(data => {
              <div key={key}>
                {data[key]}
              </div>
          })

          }
         Woerkkk please
    </div>
    
    );
  }
}
 

Все, что я получаю, это пустой экран.

в консоли я получаю сообщение об ошибке «ключ» не определен no-undef

В вашей карте отсутствует оператор return для вашего метода рендеринга. Редактировать: ключ не возвращается из Object.values

Либо перенастроить с помощью оператора return следующим образом:

 {Object.keys(data).map(key => {
          return (<div key={key}>
            {data[key]}
          </div>);
      })
 

Или, в качестве альтернативы, вы можете неявно вернуться из функции со стрелкой, используя скобки

 {Object.keys(data).map(key => (
          <div key={key}>
            {data[key]}
          </div>)
      ))
 

С помощью Object.values(myObj) вы можете получить все значения объекта в виде массива. Итак, с помощью этого массива вы можете выполнять итерации по массиву и отображать свои элементы, например:

 {Object.values(myObj).map(value => <p>{value}</p>)}
 

Не забывайте использовать key prop при итерации.

Вы можете использовать useState и useEffect для извлечения данных объекта

 const App = () => {

  const [objData, setObjData] = useState({});
  const [objItems, setObjItems] = useState([]);
  
 const fetchObj = async () => {
     const response = await fetch(`https://indapi.kumba.io/webdev/assignment`);
     const data = await response.json();
     setObjData(data);
     setObjItems(data.items);
    }
    
    useEffect(() => {
       fetchObj()
    },[]);
    
    return(
    <div> 
         <h1> Order Id :{objData.order_id}</h1>  
          // or any other objData keys
             <h1>Items : </h1>
             <ul>
                {
                 objItems.map((i, idx) => {
                 return(
                   <li key={idx}>Name : {i.name} , Category: {i.category}, Price: {i.price}, Currency: {i.currency}</li>
                  )
                })
               }
            </ul>

    </div>
    )
}
export default App;