Question

我需要渲染两个端点，response.data.data1和response.data.data2，

如果我注释掉描述对象的输出，则结果数组列表在渲染中工作正常，但是如果我不注释它，则应用程序崩溃并显示错误和警告：

上述错误发生在组件中：考虑在树上添加错误边界以自定义错误处理行为。
警告：无法在已卸载的设备上执行React状态更新组件。

class Search extends Component {
    constructor() {
        super()
        this.state = {
            query: '',
            results: {},
            spinning: false,
            description: {}
        };

        this.cancel = ''
    }
    /* take input query from user */
    performSearch = (query) => {
        const url = `url`
        if (this.cancel) {
            this.cancel.cancel();
        }

        this.cancel = axios.CancelToken.source();

        axios.get(url, {
                cancelToken: this.cancel.token
            })
            .then(response => {
                this.setState({
                    results: response.data.data1,
                    spinning: false,
                    description: response.data.data2
                })
                console.log(response)
                /* handle error*/
            }).catch(err => {
                if (axios.isCancel(err) || err) {
                    console.log('Error: ', err.message);
                    this.setState({
                        spinning: false
                    })
                }
            })
    }
    handleInputChange = (event) => {
        const query = event.target.value
        if (!query) {
            this.setState({
                query,
                results: {},
                description: {}
            });
        } else {
            this.setState({
                query,
                spinning: true,
            }, () => {
                this.performSearch(query)
            })
        }
    }
    showSearchResult = () => {
        const { results, description } = this.state
        if (results.length) {
            return (
                <div >
                    {/*<div >
                        <h4>{description.name} </h4>
                    </div>*/}
                    <ul>
                        { results.map( item => {
                            return (
                                <div  key={ item.word }>
                                    <li >
                                        <h4 >{item.word}</h4>
                                    </li>
                                </div>
                            )
                        } ) }
                    </ul>
                </div>
            )
        }
    }
    render() {
        const { query, spinning } = this.state
        return (
            <div >
                <label  htmlFor="search-input">
                    <input
                        type="text"
                        name="query"
                        value={query}
                        id="search-input"
                        placeholder="Search..."
                        onChange={this.handleInputChange}
                    />
                </label>
                { this.showSearchResult() }             
                <img 
                    src={ Spinner }     
                    className={`spinner-icon ${ spinning ? 'show' : 
                        'hide' }`}
                    alt="Spinner gif"/>

               </div>
        )
    }
}

Answer 1

您的初始状态是一个空对象，

description: {}

因此，当您尝试像这样访问它时，

<div >
   <h4>{description.name} </h4>
</div>

它只是检查description对象是否包含name键。如果是，则仅打印它，否则将引发错误。

根据您的评论， response.data有时不显示data2，即当它崩溃时。 如果data2本身不存在，那么您{{1} }对象将保持为空。因此，从空对象访问值总是会引发错误。

要解决此问题，您需要conditionally render来自描述对象的值。

description

这里我们使用{description && <div> <h4>{description.name} </h4> </div> }。这意味着，如果Logical && Operator对象包含数据，那么只有您的description会得到渲染，否则div不会在文档中添加该React。

当具有相同网址的不同端点时，反应api响应崩溃

1 个答案: