將道具傳遞給不在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規則可用於防止回調返回值出現問題。