Извлечение отдельных данных JSON на ReactionJS

Question

Когда я анализирую JSON со своего сервера на мой реагирующий интерфейс, он отлично работает, но когда я добавляю параметр для отображения отдельного элемента, я получаю сообщение об ошибке.Как отобразить отдельные данные JSON на реагировать JS.Я получаю данные JSON с моего сервера отдыха.Мой код выглядит следующим образом.

Чтобы получить JSON, я использую следующий метод.

state = {
    isLoading: true,
    groups: [],
};  

async componentDidMount() {
    const response = await fetch('/product/all/1');
    const body = await response.json();
    this.setState({ groups: body, isLoading: false });
}

Вот как я называю массив

  {this.state.groups.map(group => <div className="col-sm-12 col-md-6 col-lg-4 p-b-50">
                                    {/* Block2 */}
                                    <div className="block2">
                                        <div className="block2-img wrap-pic-w of-hidden pos-relative block2-labelnew">
                                             <img src={group.thumbnail} />
                                            <div className="block2-overlay trans-0-4">
                                                <a href="#" className="block2-btn-addwishlist hov-pointer trans-0-4">
                                                    <i className="icon-wishlist icon_heart_alt" aria-hidden="true" />
                                                    <i className="icon-wishlist icon_heart dis-none" aria-hidden="true" />
                                                </a>
                                                 <button key={group.id} onClick={() => this.add(group.productid, group.name)} className="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4">Add to Cart</button>

                                            </div>
                                        </div>

                                        <div className="block2-txt p-t-20">

                                             <a  href={`/productdetails/` + group.productid}>{group.name}</a>

                                        </div>
                                    </div>
                                </div>)}

Я получаю сообщение об ошибке: « TypeError: this.state.groups.map не является функцией »

Бэкэнд My Spring для вызова всех элементов и отдельных элементов выглядит следующим образом

@GetMapping("/product")
public List<Product> index(){
    return productRepository.findAll( );
}

@GetMapping("/product/all/{id}")
public Product show(@PathVariable String id){
    int productId = Integer.parseInt(id);
    return productRepository.findOne(productId);
}

PS Оба API, кажется, работают нормально при тестировании на почтальоне и получении ("API / продукты") тоже отлично работает

Answer 1

this.state.groups.map is not a function. Это означает, что React ожидает, что this.state.groups будет массивом. Если вы возвращаете только один товар, сделайте это так:

this.setState({ groups: [body], isLoading: false });

таким образом, body будет первым и единственным элементом в массиве.