Для некоторых из вас это должно быть очень просто. У меня есть супер простое приложение, которое я делаю, чтобы научиться славе React и reactDom. В настоящее время я использую API (который действительно работает!), Однако я не вижу никаких данных при рендеринге на экран. Буквально всего две составляющие. Я уверен, что здесь я использую реквизит или неправильно говорю, просто не знаю где. Возможно, проблема в моей функции карты.

Вот код:

Родитель :

import React from "react";
import ReactDOM from "react-dom";
import axios from 'axios'
import { Table } from './Table'

export class DataList extends React.Component {

    state = {
        articles: []
    }
    componentDidMount() {
        axios.get('http://127.0.0.1:8000/api/portblog/')
        .then(res => {
            this.setState({
                articles: res.data
            })
            console.log(res.data)
        })
    }
    render() {
        return(

            <div>

            <Table id={this.state.articles.id} articles={this.state.articles} />
            </div>
        )
    }
}
export default DataList

И ребенок

import React from "react";
import PropTypes from "prop-types";
import key from "weak-key";



export const Table = (props) => (

  <div>
  <h1>Welcome to the Article List Page Home</h1>
    <li>{props.articles.map((article) => {
      {article.titles}
    })}</li>
  </div>

  );

export default Table;
2
lakerskill 25 Сен 2018 в 04:21

2 ответа

Лучший ответ

Проблема в том, что ваш map() вызов ничего не возвращает. Вам нужно сделать что-то вроде:

<div>
  <h1>Welcome to the Article List Page Home</h1>
  {props.articles.map(article => 
    <li>{article.titles}</li>
  )}
</div>

Я не совсем уверен, каков ваш желаемый результат, но обычно вы сопоставляете данные для создания набора элементов dom.

3
Matt Way 25 Сен 2018 в 01:31

Проблема в

<li>{props.articles.map((article) => {
  {article.titles}
})}</li>

Выражения JSX нельзя использовать в произвольном месте. props.articles.map(...) уже является выражением, поэтому создание нового не имеет смысла.

{article.titles} внутри функции создает блок это ничего не делает. Из обратного вызова map ничего не возвращается, массив ни на что не отображается.

В зависимости от того, как должен выглядеть полученный макет, он должен быть либо

<li>{props.articles.map((article) => article.titles)}</li>

Выводить заголовки в одном теге <li> или

{props.articles.map((article) => <li>{article.titles}</li>)}

Для вывода списка тегов <li>.

Правило ESLint array-callback-return можно использовать для предотвращения проблемы с обратным вызовом возвращаемое значение.

2
Estus Flask 25 Сен 2018 в 01:37