реагирует на сбой api-ответа при наличии другой конечной точки для того же URL

Question

У меня есть две конечные точки, которые мне нужно отрендерить, response.data.data1 и response.data.data2,

список массива результатов прекрасно работает при рендеринге, если я закомментирую вывод объекта описания, но если я раскомментирую егоприложение вылетает с ошибкой и предупреждением:

1. Вышеупомянутая ошибка произошла в компоненте: рассмотрите возможность добавления границы ошибки в ваше дерево для настройки поведения обработки ошибок.

2. Предупреждение. Невозможно выполнить обновление состояния 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 нет, то ваш description объект останется пустым. Таким образом, при доступе к значению из пустого объекта вы всегда получите ошибку.

Для решения этой проблемы вам необходимо условно отобразить значения из объекта описания.

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

Здесь мы используем Logical && Operator.Это означает, что если объект description содержит данные, то только ваш div будет визуализирован, иначе React не добавит div в документ.