Question

import React, { Component } from 'react'; 

class App extends Component { 
    constructor(props) { 
        super(props); 
        this.state = { data: null, }; 
    } 

    componentDidMount() { 
        fetch('https://jsonplaceholder.typicode.com/todos/1') 
            .then(response => response.json())  
            .then(json => console.log(json)); 
    } 

}

export default App;

Answer 1

您需要在组件中渲染某些东西，这意味着您的类中有一个render方法。

请查看react docs。并显示在render中。

render()方法是类组件中唯一需要的方法。
  调用时，它应检查this.props和this.state并返回以下类型之一：


反应元素。通常通过JSX创建。例如，<div />和<MyComponent />是React元素，分别指示React渲染DOM节点或另一个用户定义的组件。

数组和片段。让您从渲染返回多个元素。有关更多详细信息，请参见有关片段的文档。

门户。让您将子级渲染到另一个DOM子树中。有关更多详细信息，请参见门户网站上的文档。

字符串和数字。这些在DOM中呈现为文本节点。

布尔值或null。什么都不渲染。（大多数情况下都支持返回测试&&模式，其中test为布尔值。）

因此使用您问题中的代码作为示例

import React, { Component } from 'react'; 

class App extends Component { 
    constructor(props) { 
        super(props); 
        this.state = { data: null, }; 
    } 

    componentDidMount() { 
        fetch('https://jsonplaceholder.typicode.com/todos/1') 
            .then(response => response.json())  
            .then(json => console.log(json)); 
    } 

    // added the render method
    render() {
        return (
            // needs to return some of the above listed options
        )
    }

}

export default App;

Answer 2

如果您使用类组件，则需要渲染一些东西。例如，让您的代码正常工作。

import React, { Component } from 'react'; 
import {render} from 'react-dom';

class App extends Component { 
    constructor(props) { 
        super(props); 
        this.state = { data: null, }; 
    } 

    componentDidMount() { 
        fetch('https://jsonplaceholder.typicode.com/todos/1') 
            .then(response => response.json())  
            .then(json => console.log(json)); 
    } 
    public render() {
            return (<div> my component </div>)
    }
}

export default App;

在这里您可以看到组件正在渲染div。我建议您可以从react basic tutorial开始您的反应学习，这将帮助您在开始工作之前获得基础知识。享受反应：）

TypeError：instance.render不是函数

2 个答案: