Question

对于某些人来说，这应该超级简单。我有一个超级简单的应用程序，我正在教自己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;

Answer 1

问题是您的map()调用未返回任何内容。您需要执行以下操作：

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

我不确定您想要的输出是什么，但是通常您会映射数据以生成一组dom元素。

Answer 2

问题是

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

JSX表达式不能在任何地方使用。 props.articles.map(...)已经是一个表达式，因此创建一个新表达式是没有意义的。

函数内的

{article.titles}创建一个block，它什么也不做。 map回调未返回任何内容，该数组未映射到任何内容。

取决于最终布局的外观，应该是

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

在单个<li>标签内输出标题，或

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

输出<li>标签的列表。

ESLint array-callback-return规则可用于防止回调返回值出现问题。

将道具传递给不在React中工作的孩子

2 个答案: