为什么我不能将道具分配给常量并渲染它

Question

父组件 Display 将属性提供给名为 GoodsPresentation 的子组件。

import React, { Component } from 'react';
import GoodsPresentation from "./goodsPresentation/goodsPresentation";
import ShoppingCart from "./shoppingCart/shoppingCart.component";
import axios from 'axios';

class Display extends React.Component {
  
  constructor(props){
    super(props);
    this.state = {
      products:null
    }
  }

    componentDidMount() {
      
      axios.get( backend)
            .then( response => {
                  this.setState( {
                      products:response.data
                  });
                });
    }

  render() {
    
    return (
      <div>
        <GoodsPresentation productsArray={this.state.products? this.state.products : undefined} />
        <ShoppingCart/>
      </div>
      );
      
  }
}

export default Display;

这是前锋作为道具： productsArray

效果很好。

然后我想映射产品数组（道具）并将其分配给一个名为 Data 的常量。然后我想在子组件的 return 方法中呈现数据。这会导致以下错误消息：

我不明白为什么它不起作用。我究竟做错了什么？（数据标签下注释掉的映射工作正常）

这是 GoodsPresentation 组件：

import React, { Component } from 'react';
import Table from 'react-bootstrap/Table';

class GoodsPresentation extends React.Component {
  
  constructor(props){
    super(props);
    }

    componentDidMount() {
    }
    
  render() {

   const Data = this.props.productsArray != undefined ? this.props.productsArray.map(
      (item,index)=>{
        return (
        <p>Works</p>
       )           
       }  
)
    :null;

    
    return (

      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <Data/>
        {/* {this.props.productsArray != null ? this.props.productsArray.map(
                 (item,index)=>{
                   return (
                   <p>Works</p>
                  )           
                  }  
          )
               :null} */}
         
        </tbody>
      </Table>
    

   
      );
      
  }
}


export default GoodsPresentation;

Answer 1

编辑我猜我看你的代码不够好。问题是 <Data /> 组件。将其更改为 {Data}

为什么我不能将道具分配给常量并渲染它

Why can`t I assign the props to a constant and render it

reactjs

react-component