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

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}创建了一个不执行任何操作的块 。 map回调未返回任何内容，该数组未映射到任何内容。

根据最终布局的外观，它应该是

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

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

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

输出<li>标签列表。

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