почему console.log ("hello") печатает шесть раз в перехватчиках React - PullRequest
Новая
       28

почему console.log ("hello") печатает шесть раз в перехватчиках React

1 голос
/ 17 апреля 2020

Я изучаю хуки реакции и использовал случайный API для выборки демо-пользователей. Может кто-нибудь сказал мне, почему привет печатается 6 раз, а также я не могу использовать оператор if внутри моего оператора возврата 

import React, {useState, useEffect} from "react";

function RandomUser () {
    const [users, setuser] = useState([]);
    const [loading, setLoading ] = useState(true);

    useEffect(()=>{
        console.log("fetching api ");
        fetch("https://randomuser.me/api/?results=50").then((res)=>{
            return res.json();
        }).then((res)=>{
            setuser(res.results);
            setLoading(false);
        })
    },[])
        console.log("hello");
    return (
        <>
        {loading && <h1>Loading</h1>}
        {users.map((v,i)=>{
            return(
                <li>
                    {v.name.first}
                </li>
            )
        })}
        </>
    );
}

export default RandomUser;

enter image description here

I am getting Expression expected error

1 Ответ

2 голосов
/ 17 апреля 2020

Ваша строка console.log не находится внутри вашего useEffect хука и поэтому вызывается при каждом рендере. Реагирующие вызовы отрисовываются всякий раз, когда это необходимо, поэтому вы не должны включать код, имеющий побочные эффекты (за исключением хуков) внутри функциональных компонентов. Если вы хотите, чтобы эта строка журнала вызывалась после получения результата, переместите ее на значение после setLoading(false);

JSX не поддерживает if операторов внутри литералов JSX, но он поддерживает троичные выражения (condition ? trueValue : falseValue) и логические выражения (condition && trueValue или condition || falseValue), которые обычно работают. Кроме того, вы можете поместить ваши блоки if в небольшие подкомпоненты или во вспомогательные функции. Просто убедитесь, что вы всегда возвращаете либо компонент, либо null из каждой ветви кода. Например, чтобы создать загружаемый компонент: 

function Loading ({loading=true}) {
  if (loading) return (<h1>Loading...</h1>)
  return null // notice the else is not necessary here
}

//and use it like this:

return(<><Loading loading={loading} /></>)

Причина, по которой операторы не поддерживаются, заключается в том, что они не имеют возвращаемых значений (они не являются выражениями ), а троичные и логические выражения делают. Вы можете вызвать return изнутри оператора if, но это приведет к возврату всей функции, а не только оператора if.

JSX соответствует чему-то вроде React.createComponent(React.Fragment, null, children). Представьте, что произойдет, если вы поставите оператор if, где children. На самом деле, попробуйте что-то вроде console.log(if (true) {true} else {false}) и посмотрите, что получится. Сбой, потому что вы должны предоставить выражение , а не выражение в качестве аргумента функции. (Обратите внимание, что, как правило, выражение также является утверждением, но не всегда наоборот).

Это видео может оказаться полезным: https://en.hexlet.io/courses/intro_to_programming/lessons/expressions/theory_unit

...