Can't Render React Component, Error 在我的理解或代码中？

Question

所以我已经构建了一个图形生成器并在道具上拥有所有正确的数据问题是当我去渲染构建组件时它会记录

Object { "$$typeof": Symbol(react.element), type: createElement(), key: "1", ref: null, props: {...}, _owner: null, _store: { …}, … }

这是代码，我确信它有些愚蠢，我对渲染不了解。

我

mport React, { Component } from 'react'
import * as action from '../../actions'
import { connect } from 'react-redux'
import jsx from 'react-jsx'
import { bindActionCreators } from 'redux'
import {Modal} from './Modal'
@connect(
  (flux, props) => {

    return {
      filters: flux.FilterStore,
      ready: flux.FilterStore.ready,
      presets: flux.DataStore.preSelectList,
      graphs: flux.GraphStore.graphList
    }
  },
  (dispatch, props) => {
    dispatch(action.fetchGraphList())
    return {
      addDataReportGraphDetails: bindActionCreators(action.addDataReportGraphDetails, dispatch)
    }
  }
)

class RenderGraphPreview extends Component {
  constructor(props) {
    super(props)
    this.state = {
      running: {},
      show:false,
      graph:{}
    }
    this.data = 0;
  }


  //Error function for shorthand errors
  throwError = (string = "Error", err = null) => {
    throw new Error(`${string}:${err}`)
  }

  //simple print function to print objects and strings
  p = (string, variable) => {
    typeof variable === `object` ? variable = JSON.stringify(variable) : variable
    console.log(`${string}:${variable}`)
  }

  showModal = e => {
    this.state.show = true
    }
  

  generateGraph = ({ presets, filters, graphDetails }) => {
    var reportProps = {
      wasRunning: true,
      companyName: filters.company_name,
      companyVertical: filters.company_vertical,
      graphTitle: jsx.client(`<div>${graphDetails.title}</div>`)(reportProps).props.children
    }
    this.data++

    if (typeof reportProps.graphTitle == "object") {

      reportProps.graphTitle = reportProps.graphTitle.join("")
    }
    if (!this.state.running) {
      reportProps.wasRunning = false
      this.state.running = true
    }
    if (graphDetails.graph) {
      var Graph = React.createFactory(require(`../graphs/${graphDetails.graph}`).default);
      var newGraphProps = {}
      var graphPropKeys = Object.keys(graphDetails.props || {})
      graphPropKeys.map((graphKey) => {

        if (graphDetails.props[graphKey] && graphDetails.props[graphKey].toString().length > 0)
          newGraphProps[graphKey] = graphDetails.props[graphKey]
      })
      if (graphDetails.timeframe) {
        newGraphProps[timeframe] = graphDetails[timeframe]
      }

      if (graphDetails.props.attackIndexFilterPreset) {
        let preset; 
        for (let j = 0, jEnd = presets.length; j < jEnd; j++) {
          if (presets[j]._id == graphDetails.props.attackIndexFilterPreset) {
            return preset = presets[j]
          }
        }
        if (preset) {
          console.log(`In presents`)
          newGraphProps = { ...preset, ...newGraphProps }
        }
      }
    }
      // console.log(<Graph key={this.state.count++} isDocument={true} reportKey={graphDetails.key} onImageCreated={this.props.addDataReportGraphDetails} {...filters} {...reportProps} {...newGraphProps}/>)
    return (
      <Graph key={this.data} isDocument={true} reportKey={graphDetails.key} onImageCreated={this.props.addDataReportGraphDetails} {...filters} {...reportProps} {...newGraphProps}/>
    )
  }


    //Verifies we have the correct data to build the graph
    startGraphGeneration = async (e,{ props }) => {
      e.preventDefault()
      let require = this.props.filters && this.props.presets && props
      if (!require) {
        this.throwError()
      }
      let graphProps = {
        presets: this.props.presets,
        filters: this.props.filters,
        graphDetails: props,
      }
     let g = await this.generateGraph(graphProps) 
      this.setState({
        graph: g
      });
     console.log(g)
     
    }

   

    render() {
      var x = this.state.graph
    return (
      
     <div> 
       <button onClick={(e) => this.startGraphGeneration(e,this.props)}>Preview Graph</button> 
        {this.state.graph ? <x/> : `Doing Noting`}
     </div>
    )
   

    }
  }

  export default connect()(RenderGraphPreview)

Answer 1

在您的渲染方法中，您使用this.state.graph。您将此变量设置为从 generateGraph 函数返回的值，该函数返回 rendered 节点，而不是 组件 .然后您尝试将此节点呈现为组件（<x/>），但这是行不通的。也在 generateGraph 函数console.log(g) 向您显示渲染 组件。因此，只需在您的渲染方法中返回 x：

 render() {
    var x = this.state.graph
    return (

     <div> 
       <button onClick={(e) => this.startGraphGeneration(e,this.props)}>Preview Graph</button> 
        {this.state.graph ? x : `Doing Noting`}
     </div>
    )
 }