Как выполнить l oop и отобразить список предметов, собранных из базы данных (база данных в реальном времени)

Question

У меня есть объект, который я получил от Firebase, и теперь мне нужно каким-то образом пройти через него oop и отобразить его. Частично проблема заключается в том, что Firebase присваивает каждой записи в схеме уникальный идентификатор, что означает, что мне нужно сделать javascript 'magi c', чтобы получить мои данные.

Вот что у меня есть, но у меня проблемы со всем ключевым (в настоящее время ниже выдает ошибку: Warning: Each child in a list should have a unique "key" prop.). Я еще не нашел какой-либо конкретной помощи в Интернете, поэтому любая помощь приветствуется.

Данные в Firebase выглядят примерно так:

• fooData
  • giberi sh случайный идентификатор
    • заголовок
    • дата
    • текст уценки

Редактировать: Быть Ясно, что вторая часть этого вопроса - как мне извлечь данные, которые мне нужны? (название, дата, уценка). Эта map функция кажется наиболее перспективным методом, но я не уверен, как получить дочерние элементы. В настоящее время я не получаю никакой информации (ноль). Я предполагаю, что это потому, что заголовок, дата, потомки уценки на один уровень глубже и не существуют в текущем root элементе объекта.

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firebase: props.firebase,
            data: null
        }
    }

    componentDidMount() {
        const dataRef = firebase.database().ref('link/fooData');
        dataRef.on('value', snapshot => {
            this.setState({
                data: snapshot.val()
            });
        });
    }

    render() {
        return (
            <div className="container">
            {(this.state.data) ? (
                <div>
                    {Object.keys(this.state.data).map((key) => {
                        return (
                            <Row>
                                <Col lg={2}><p key={key}>{this.state.data[key].title}</p></Col>
                                <Col lg={2}><p key={key}>{this.state.data[key].date}</p></Col>
                                <Col lg={8}><ReactMarkdown key={key}>{this.state.data[key].markdownText}</ReactMarkdown></Col>
                            </Row>
                        )
                    })}
                </div>
            ) : null}
            </div>
        )
    }
}

Answer 1

ответ techguru действителен, в зависимости от вашей ситуации. Однако мне пришлось пройти мимо уникальных ключей в объекте firebase.

Для этого я использую forEach l oop на снимке:

dataRef.on('value', (snapshot) => {
    snapshot.forEach(item => {
        this.setState({data: this.state.data.concat(item.val().data)});
    });
});

Отсюда я беру состояние и отображаю данные в render(), аналогично ответу techguru.

Надеюсь, этот ответ плюс ответ techguru даст хорошую подборку информации:)

Answer 2

Попробуйте добавить ключ как этот

return (
        <Row key={key}>
           <Col lg={2}><p>{key.title}</p></Col>
              <Col lg={2}><p>{key.date}</p></Col>
                <Col lg={8}>
                  <ReactMarkdown >{key.markdownText} 
                  </ReactMarkdown>
                </Col>
        </Row>
 )

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