Почему я получаю в два раза больше параметров запроса в React?

Question

Я пытаюсь получить значение параметра в родительском компоненте (Home) и отправить его непосредственно моему дочернему компоненту (Cars). Но перед отправкой я проверил с помощью console.log, какие параметры были отправлены, и отчасти он отправлял два параметра вместо одного. Почему это происходит?

Вот мой код:

function Home(props) {

const [query, setQuery] = useState();

useEffect(() => {
    async function wait() {
        await setQuery(props.match.params.id);  
    } 
    wait();
    console.log(query);
});

return (
    <Fragment>
        <Header />
        <Cars />
    </Fragment>
)}

Например, когда я нажимаю на дочерний компонент, он должен go перейти непосредственно к: "http://localhost: 3000 / marca / 1". И я должен получить в console.log: 1. Вместо этого я должен: «undefined» и «0»

Answer 1

Вы получаете 2 журнала, потому что ваш компонент обновляется 2 раза: 1) во время монтирования (с query = undefined) 2) после вызова setQuery, следовательно, query стал обновленным

Если вы хотите вызовите useEffect только один раз, просто передайте [] в качестве второго аргумента useEffect:

useEffect(() => {
    async function wait() {
        await setQuery(props.match.params.id);  
    } 
    wait();
    console.log(query);
}, []);

Если вам нужно запускать useEffect каждый раз при обновлении запроса, просто передайте массив всех значений который useEffect используется:

useEffect(() => {
    async function wait() {
        await setQuery(props.match.params.id);  
    } 
    wait();
    console.log(query);
}, [query, setQuery]);

Более подробную информацию вы можете получить здесь: https://reactjs.org/docs/hooks-effect.html