Javascript не возвращает элемент html [закрыто]

Question

Javascript не возвращает элемент html [закрыто]

Пытался сделать какой-то проект для себя, чтобы потренироваться реагировать, потому что я новичок, и у меня возникли проблемы, которые, несмотря ни на что, он не возвращает html из javascript после использования карты внутри карты

import './App.css';
import data from './data.json';
import React from 'react';

function App() {
  const keys = Object.keys(data)
  return (
    <div className="App">
      <header className="App-header">
         {keys.map(key => {
           if (key !== "events"){
               return (<h1 className="data">{key} : {data[key]}</h1>);
           }else{
             data["events"].map(event => {
               return (<h1 className="event_data"> {event["name"]} value was changed to {event["state"]} in {event["date"]} </h1>);
             })
           }
         })
        }
      </header>
    </div>
  );
}

export default App;

Есть ли какая-то причина, по которой это не работает? и как мне это исправить?

# javascript reactjs

Cyaa03 июнь 2021, в 13:22

Источник

1

Опечатка: вы проигнорировали возвращаемое значение map: data["events"].map(event => { поэтому, если оно попадает в ветку else, возвращается undefined. Quentin 03 июнь 2021, в 13:24

Поделиться в социальных сетях:

Скопировать адрес страницы:

Ответы 2

Смежные вопросы

Опечатка: вы проигнорировали возвращаемое значение map: data["events"].map(event => { поэтому, если оно попадает в ветку else, возвращается undefined.

TKoL · Answer 1 · 2021-06-03T10-24-54.000Z

эта ветка:

           }else{
             data["events"].map(event => {
               return (<h1 className="event_data"> {event["name"]} value was changed to {event["state"]} in {event["date"]} </h1>);
             })
           }

не возвращает элементы. Тебе нужноreturn data['events'].map...

Dharman · Answer 2 · 2021-06-03T10-48-13.000Z

Сначала вам нужно объявить класс для своего приложения. Затем определите внутри функцию рендеринга для печати HTML в DOM.

Попробуй это:

import './App.css';
import data from './data.json';

import React, {Component} from 'react';

class App extends Component {
  
  render() {

    const keys = Object.keys(data)
    
    return (
      <div className="App">
        <header className="App-header">
           {keys.map(key => {
             if (key !== "events"){
                 return (<h1 className="data">{key} : {data[key]}</h1>);
             }else{
               data["events"].map(event => {
                 return (<h1 className="event_data"> {event["name"]} value was changed to {event["state"]} in {event["date"]} </h1>);
               })
             }
           })
          }
        </header>
      </div>
    );
  }

}

export default App;