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>