ReactJS: Как правильно обрабатывать данные, извлеченные из API food2fork?

Question

У меня есть приложение, созданное с помощью ReactJS.Его целью является отображение рецептов, которые ищутся в API food2fork.У меня нет проблем с обновлением состояния родительского компонента.Данные выбираются после нажатия кнопки «Поиск» в приложении.Моя проблема связана с отправкой извлеченных данных в качестве реквизитов дочернему компоненту и правильным отображением полученных рецептов на основе текущего поиска.

---

handleChange предназначен только для обработки ввода.

handleSearch - это то, что я хотелиспользовать 'onClick' кнопки для отображения данных, выбранных из API.

Извлеченные рецепты должны отображаться в компоненте Results.

Надеюсь, это понятно:)

---

Помимо передачи только состояния в качестве реквизита из родительского компонента и использования его в дочернем компоненте, я также пытался обновить дочернее состояние на основе полученных реквизитов с помощью методов жизненного цикла - возможно, я не использовал их корректно ...

Родителькомпонент:

import React, { Component } from 'react';
import Results from './Results';

class Recipes extends Component {
    constructor(props){
        super(props);
        this.state = {
            search: '',
            recipes: []
        }
    }
    handleChange=e=>{
        this.setState({
            search: e.target.value
        })
    }


    handleSearch =()=>{
            if(this.state.search !== ''){
                const url = `https://www.food2fork.com/api/search?key=367d2d744696f9edff53ec5b33a1ce64&q=${this.state.search}`

                fetch(url)
                        .then(data => data.json())
                        .then(jsonData => {
                            this.setState((jsonData)=> {return {
                                recipes: jsonData}
                            })
                        })

            } else {
                console.log('empty')
            }
    }

    render() {
        return (
            <Wrapper>
                <SearchBar 
                    value={this.state.search} 
                    type='search' 
                    onChange={this.handleChange}>
                </SearchBar>
                <SearchButton onClick={this.handleSearch}>SEARCH</SearchButton>

                <Results recipes={this.state.search}/>

            </Wrapper>
        );
    }
}

export default Recipes;

ДЕТСКИЙ КОМПОНЕНТ 'Результаты', который должен получить обновленный список рецептов в качестве реквизита и отобразить эти рецепты.

import React from 'react';
import Recipe from './Recipe';

class Results extends React.Component {
    render(){
        return (
            <Container>
                <RecipesList>
                    {this.props.recipes.map(item => 
                            <Recipe 
                                f2fURL={item.f2f_url}
                                image={item.image_url}
                                publisher={item.publisher}
                                publisherURL={item.publisher_url}
                                recipeID={item.recipe_id}
                                source={item.source_url}
                                title={item.title}
                            />)}
                </RecipesList>
            </Container>
        );
    }
};

Answer 1

Как уже упоминал @yourfavoritedev, у вас есть опечатка в результатах. Так должно быть recipes={this.state.recipes} вместо recipes={this.state.search}

Вы также должны изменить:

this.setState((jsonData)=> {return {
                                recipes: jsonData}
                            })

для:

this.setState({ recipes: jsonData })

Функция обновления будет выглядеть примерно так (документация здесь ):

(state, props) => stateChange

Таким образом, jsonData, который вы используете в setState, на самом деле является предыдущим состоянием, а не данными, поступающими из вызова API.

Answer 2

Ваша проблема здесь

this.setState((jsonData)=> {return {
    recipes: jsonData}
})

внутри вашего ответа ajax.

Измените это на

this.setState({recipes: jsonData});

Это должно правильно установить объект рецептов.