React.js组件运行错误。未捕获TypeError：无法读取未定义的属性“0”

Question

我正在尝试创建一个Fetch组件，它应该发送POST请求返回响应内容。同时我创建了一个NameForm组件，它为Fetch组件生成数据以发送请求。我的问题是当我使用this.state.result.queryResults[0]时，我在Chrome中遇到了错误：

这是我的js代码：

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

        class Fetch extends React.Component {

            constructor() {
                super();
            }

            render() {
                return (
                    <Request
                        url='http://localhost:8080/path'
                        method='post'
                        accept='application/json'
                        type="application/json"
                        send={this.props.args}
                        verbose={true}
                    >
                        {
                            ({error, result, loading}) => {
                                if (loading) {
                                    return <div>loading...</div>;
                                } else {
                                    return <div>{result.text}</div>;
                                }
                            }
                        }
                    </Request>
                );
            }
        }

        class NameForm extends React.Component {
            constructor() {
                super();
                this.state = {value: '', result: []};

                this.handleChange = this.handleChange.bind(this);
                this.handleSubmit = this.handleSubmit.bind(this);
            }

            handleChange(event) {
                this.setState({value: event.target.value});
            }

            handleSubmit(event) {
                var content = this.state.value;

                var split = content.split(/\s+/);

                var queryObject = new Object();

                queryObject.law = null;
                queryObject.character = null;
                queryObject.lawRule = null;
                if (split.length == 1) {
                    queryObject.law = split[0];
                }
                else if (split.length == 2) {
                    queryObject.law = split[0];
                    queryObject.character = split[1];
                }
                else if (split.length > 2) {
                    queryObject.law = split[0];
                    queryObject.character = split[1];
                    queryObject.lawRule = split[2];
                }
                var json = JSON.stringify(queryObject);



                this.setState({result: (<Fetch args={json}/>)});

                event.preventDefault();
            }

            render() {
                return (
                    <div>
                        <form onSubmit={this.handleSubmit}>
                            <label>
                                Name:
                                <input type="text" value={this.state.value} onChange={this.handleChange}/>
                            </label>
                            <input type="submit" value="Submit"/>
                        </form>
                        <table>
                            <thead>
                            <tr>
                                <th>GraphName</th>
                                <th>Relation</th>
                                <th>Content</th>
                                <th>KeyWord</th>
                            </tr>
                            </thead>
                            <tboy>{this.state.result.queryResults[0]}</tboy>
                        </table>

                    </div>
                );
            }
        }

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

我的帖子回复是这样的json：

{
        "path": {
            "law": "MyLaw",
            "character": "C1",
            "lawRule": null
        },
        "queryResults": [
            {
                "graphName": "MyLaw/C1",
                "relation": "self",
                "content": "I am C1",
                "keyword": {
                    "a": 0.4296310331415849,
                    "b": 0.22019926949447058,
                    "c": 0.16514945212085294,
                    "d": 0.16514945212085294,
                }
            },
            {
                "graphName": "MyLaw/C1/C1.1",
                "relation": "child",
                "content": "I am C1.1",
                "keyword": null
            },

            {
                "graphName": "MyLaw/C1/C1.2",
                "relation": "child",
                "content": "I am C1.2",
                "keyword": null
            },
            {
                "graphName": "MyLaw/C1/C1.3",
                "relation": "child",
                "content": "I am C1.3",
                "keyword": null
            },

        ]
    }

Answer 1

在构造函数中，我们定义了state初始值

        constructor() {
            super();
            this.state = {value: '', result: []};

            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }

因此，result的初始值为[]。

在handleSubmit中，您将获取结果数据。

        handleSubmit(event) {
            ...
            this.setState({result: (<Fetch args={json}/>)});
            ...
        }

因此，在提交和提取数据之前，result为[]

所以，请改变

 <tboy>{this.state.result.queryResults[0]}</tboy>

要

 <tboy>{this.state.resultthis.state.result.queryResults[0]}</tboy>

Answer 2

在初始渲染结果状态是一个空数组，它仍然像它一样，直到收到来自fetch调用的响应。所以

<tbody>{this.state.result.queryResults[0]}</tbody>

失败，因为result.queryResults未定义。

所以你需要一个有条件的检查。

<tbody>{this.state.result.length > 0? 
     this.state.result.queryResults && 
     this.state.result.queryResults[0]: 
 null}</tbody>

Answer 3

它会给你错误，因为第一次呈现它时，在请求到达服务器之前找不到queryResult。

试试这个：

<tboy>
    {
        this.state.result.queryResults
            ?
            this.state.result.queryResults[0]
            : null
    }
</tboy>