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>