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类对象的引用，该对象继承了setState()类中的React.Component方法。

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

Answer 2

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

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

this.state.setState将永远不会被调用，因为状态对象不会为我们提供任何此类函数所以将它改为this.setState

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

2 个答案: