React.js组件运行错误。 未捕获的TypeError：this.state.setState不是函数

Question

我正在尝试创建Fetch组件，该组件应发送POST请求并返回响应内容。 我的问题是如何在App组件中获取结果数据。 我在chrome中遇到了这样的错误：

这是我的js代码：

import React, {Component} from 'react';
import Request from 'react-http-request';


class Fetch extends React.Component {

    constructor() {
        super();
        this.state = {postResult: ''};

    }

    render() {
        return (
            <Request
                url='http://localhost:8080/path'
                method='post'
                accept='application/json'
                type="application/json"
                send='{"law":"The First Law", "character":"No.1 Character"}'
               verbose={true}
            >
                {
                    ({error, result, loading}) => {
                        if (loading) {
                            return <div>loading...</div>;
                        } else {
                            this.state.setState({postResult: postResult});
                            return <div>{JSON.stringify(result)}</div>;
                           }
                        }
                }
            </Request>
        );
    }
}

class App extends React.Component {
    constructor() {
        super();
        this.state = {test: ''};
    }

    render() {

        this.state.setState({test: (<Fetch  />)});


        return (

            <table>
                <thead>

                <tr>

                    {this.state.test}


                </tr>

                </thead>


            </table>
        )
    }

}

ReactDOM.render(<App/>, document.getElementById('react'))

我不知道如何从Fetch组件获取结果数据，这让我感到困扰。

Answer 1

而不是使用

this.state.setState({postResult: postResult});

你应该用

this.setState({postResult: postResult});

错误在您的代码片段中

                    if (loading) {
                        return <div>loading...</div>;
                    } else {
                        this.state.setState({postResult: postResult});
                        return <div>{JSON.stringify(result)}</div>;
                       }
                    }
            }
        </Request>

说明：

this引用了Fetch类的对象，该对象继承了React.Component类的setState()方法。

this.state是一个普通对象，仅保存数据，没有要执行的功能。 （它没有setState() ）

Answer 2

问题出在this.state.setState（{postResult：postResult}）;

this.setState表示您正在将当前状态修改为在this.setState函数中更新的新值。

this.state.setState永远不会被调用，因为状态对象不提供任何此类功能，因此请将其更改为this.setState