React — Как правильно построить работу с внешним апи?

Question

[danil_linkins]

У меня есть основной "App" класс-компонент, который я отдаю в reactDOM.render.

Там у меня есть форма, в которой указан обработчик на сабмит:

<UI.FormLayout onSubmit={this.handleSubmit} v="new" allowSubmit={true} style={{ padding: "0", paddingBottom: "65px" }}>
                            <GetTest />
                            <UI.Group title="Отправление результатов">
                                <UI.List>
                                    <UI.ListItem>
                                        <UI.Input v="new" type="text" placeholder="Your name" label="Ваше имя" required />
                                    </UI.ListItem>
                                    <UI.ListItem>
                                        <UI.Input v="new" type="tel" placeholder="Phone" label="Ваш телефон" required />
                                    </UI.ListItem>
                                    <UI.ListItem>
                                        <UI.Input v="new" type="email" placeholder="E-mail" label="Ваш e-mail" required />
                                    </UI.ListItem>
                                    <UI.ListItem>
                                        <UI.Button appearance="vk-rich" type="submit" value="Submit">Завершить тест</UI.Button>
                                    </UI.ListItem>
                                </UI.List>
                            </UI.Group>
                        </UI.FormLayout>

(На UI и компоненты не обращайте внимания, просто библиотека). (GetTest - получение данных формы по API).

И есть сама функция где я делаю запрос к какому то файлу на сервере:

handleSubmit (event){
        event.preventDefault();

        console.log("submit complete");

        fetch("//some_url.com/api", {
            method: "POST",
            headers: {
                "Content-type": "application/json"
            },
            mode: "no-cors",
            credentials: "include",
            body: "response.formData()"
        })
            .then(result => result.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        TestResults: result,
                        activePanel: 'Results'
                    });
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error,
                        activePanel: 'Error'
                    });
                }
            );
    }

Но вот чего я не понимаю, если я отправил данные, скрипт на сервере их обработал и ответил какими то данными.json, то как мне потом взять эти данные, обработать и вывести?

Я пробовал делать отдельный класс под это дело, который вызывался в основном App и при успешном получении данных показывался бы, но в самом классе я создаю в state пустой массив, в котором нет тех данных, полученных с сервера да и вообще не понятно, как он у меня связан с функцией обработки сабмита. Код:

class PrintResult extends  Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            TestResults: []
        };
    }

    render() {
        const { error, isLoaded, TestResults } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
            return (
                <UI.View popout={<UI.ScreenSpinner />} activePanel="spinner" header>
                    <UI.ScrollView header={{ title: 'Screen Spinner' }} id="spinner">

                    </UI.ScrollView>
                </UI.View>
            );
        } else {
            return (
                <UI.Div style={{ padding: '4px 0' }}>
                    {TestResults.map((item) => (
                        <UI.Div>
                            {item}
                        </UI.Div>
                    ))}
                </UI.Div>
            );
        }
    }
}

А результат, постоянной состояние загрузки (!isLoaded) или же просто обновляется страница.

Сам вопрос то в том, как связать все это воедино? Чтобы обработчик сабмита посылал данные, получал данные и сразу их выводил в нужном месте? Подскажите, пожалуйста, что знаете. Ценен любой совет.

Answer 1

[Максим]

Из вопроса непонятно, где проблема.
Вы грузите данные асихнронно в том компоненте, где они вам нужны в момент componentDidMount, затем пишете их в state (с помощью this.setState) и реакт сам вызовет функцию рендер => на экране появятся ваши данные.

> Чтобы обработчик сабмита посылал данные
сделать запрос

> получал данные и сразу их выводил в нужном месте
положить в state. Если "нужное место" - это другой компонент, то значит нужно стейт держать в родителе и обновлять его с помощью функции переданной в качестве props в компонент, где данные вызываются. А другой компонент, где данные нужны, просто получает их из стейта компонента родителя в качестве props и так же отрисовывает (если приехали новые props реакт тоже вызывает render)

Ключевой момент: если ваши компоненты не знают ничего друг о друге, то вам нужно распологать данные "наверху" в общем родителе.

p.s. по-моему вы все верно начинаете разбирать, главное помнить, что в качестве props можно из родителя передать функцию (коллбэк), и через нее можно будет установить данные в стейт родителя и тд тп.

p.p.s. обычно так делать не приходится, потому что либо данные заранее живут в нужном компоненте, либо вы уже используете redux или что-то подобное.

// Parent component
...
state = {
  data: [],
}
...
myMethodInParent = (values) => {
  this.setState({data: values })
}
...
render() {
 ...
 <AnyChildren testName={this.myMethodInParent} />
}

// AnyChildren component
...

handleSubmit() => {
  this.props.testName( _ваши_данные_которые_нужно_в_стейт_родителя_ )
}
...
render() {
...
}

Comments

[Yustas Alexu]

Нужно избегать делать setState в componentDidMount. Это антипаттерн.

[danil_linkins]

Yustas Alexu, А как этого возможно избежать, если в componentDidMount происходят какие то операции и в результате их надо передать какое то состояние?

[danil_linkins]

Максим,

Если "нужное место" - это другой компонент, то значит нужно стейт держать в родителе и обновлять его с помощью функции переданной в качестве props в компонент, где данные вызываются. А другой компонент, где данные нужны, просто получает их из стейта компонента родителя в качестве props и так же отрисовывает

Самый интересный момент. А есть ли примеры такой реализации?
То есть я не совсем понимаю как передать функцию в качестве props в другой компонент и этой же функцией обновить компонент?

[Максим]

Yustas Alexu, это кто такое сказал?) Подкиньте ссылочку на кого-то весомого (документация, core-team разработчики или просто кто-то авторитетный по вашему мнению).

[Максим]

danil_linkins, обновил ответ

[danil_linkins]

Максим, То есть если подставить мое решение, то будет примерно так?
Хотя опять же очень не очевидная связь функции на сабмит формы, и компонента, который я потом вызываю. Там функция же эта запускается снова и данные перезаписываются.
Но странно то что возвращается состояние ошибки и просто показывает окно загрузки, а само сообщение об ошибке не выводит.

// родительский компонент
class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            popout: null,
            TestResults: []
        };

        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit (event){
        event.preventDefault();

        fetch("url", {
            method: "POST",
            headers: {
                "Content-type": "application/json"
            },
            mode: "no-cors",
            credentials: "include",
            body: "response.formData()"
        })
            .then(result => result.json())
            .then(
                (result) => {
                    // Есть результат
                    this.setState({
                        isLoaded: true,
                        TestResults: result
                    });
                },
                (error) => {
                    // Ошибка
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            );
    }

    render() {
        return (
            // Рендер формы
            <Form onSubmit={this.handleSubmit} >
                <Input type="text" placeholder="Your name" label="Ваше имя" required />
                <Input type="tel" placeholder="Phone" label="Ваш телефон" required />
                <Input type="email" placeholder="E-mail" label="Ваш e-mail" required />
                <Button type="submit" value="Submit">Отправить</Button>
            </Form>

            // Вызов дочернего компонента
            <PrintResult  Results={this.handleSubmit} />
        );
    }
}

// Дочерний компонент
class PrintResult extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            Results: this.props.TestResults
        };
    }

    render() {
        const { error, isLoaded, Results } = this.state;
        if (error) {
            return (
                // Сообщение ошибки
            );
        } else if (!isLoaded) {
            return (
                // Экран загрузки
            );
        } else {
            return (
                // Вывод полученных данных
                {Results.map((item) => (
                    {item}
                ))}
            );
        }
    }
}

export default App;

[Максим]

danil_linkins,
<PrintResult Results={this.state.TestResults} />

[Максим]

danil_linkins, ну и желательно мешанину из свойств с Прописной буквы не устраивать. Все свойства называйте с маленькой буквы.

[Yustas Alexu]

Максим, componentDidMount вызывается после окончания рендера компонента и если делать там setState то произойдет еще один рендер. Если нужно сделать аякс запрос и после его окончания обновить стейт, то это можно сделать в componentWillMount.

[Yustas Alexu]

Максим, хотя в последнее время ситуация изменилась судя по всему. Говорят в будущих версиях реакта componentWillMount, componentWillUpdate и componentWillReceiveProps будут удалены. Честно говоря я немного в недоумении, потому что пользуюсь в текущем проекте eslint с набором правил от airbnb, где есть правило react/no-did-mount-set-state. В общем беру свои слова обратно )) был не прав.

[Максим]

Yustas Alexu, Спасибо за ответ. Странно что в airbnb есть такое правило, ведь в этом вся соль: мы рисуем компонент с его начальным состоянием и потом начинаем делать различные манипуляции... я сначала тоже думал, что вроде бы логично делать сразу в componentWillMount, но где-то вычитал, что при таком подходе мы мешаем серверному рендерингу или что это просто не корректно, с точки зрения компонента, ведь он отрисовывается с каким-то начальным состоянием, которое мы как раз таки и хотим изменить! То есть, очевидно что раз "изменить", значит нужен рендер. Надеюсь, понятно написал ;)