使用dispatch时，结果在react中打印两次

Question

这更像是一个好奇的问题，我觉得知道原因会很有用，但谁能解释一下原因呢。日志（配方）打印两次。当我单击搜索按钮时，结果会在控制台中打印两次。我想我必须对react重新渲染组件两次，可以详细解释一下吗。

function Search(props) {
    const recipe = useSelector(state => state.recipe)
    const dispatch = useDispatch()
    const [query, setQuery] = useState("")
    
    console.log(recipe)


    const handleQuery = (event) => {
        event.preventDefault();

        console.log(`Query: ${query}`)
        dispatch(fetchRequest(query))
    }


    return (
        <form className={classes.Search} onSubmit={handleQuery}>
            <input
                className={classes.Search__field}
                placeholder="Search over 1,000,000 recipes..."
                value={query}
                onChange={(e) => setQuery(e.target.value)}
            />
            <button className={[buttonClasses.Btn, "search__btn"].join(' ')} type="submit"
            >
                <svg className={"search__icon"}>
                    <use href={magnifyingGlass + "#icon-magnifying-glass"}></use>
                </svg>
                <span>Search</span>
            </button>

           
        </form>
    );

}


export default Search;

这里是使用搜索组件的地方

import React from 'react';
import Search from './Search/Search';
import classes from './Header.module.css';
import logo from '../../img/logo.png';
import Likes from '../Header/Likes/Likes';

const header = (props) => {


    return (
        <header className={classes.Header}>
            <img src={logo} alt="Logo" className={classes.Header__logo} />
            <Search />
            <Likes />

        </header>
    )
}



export default header;

Header函数随后在应用程序中的布局函数中使用。js

import React, { Component } from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.module.css';
import Header from '../Header/Header';
import Results from '../Results/Results';


class Layout extends Component {

    render() {
        return (
            <Aux>
                <Header />
                <Results />
            </Aux>
        );
    }

}


export default Layout;

这里是还原动作

import axios from 'axios';

const FETCH_REQUEST = 'FETCH_USERS_REQUEST'

export const fetchRecipe = (recipe) => {
    return {
        type: FETCH_REQUEST,
        payload: recipe
    }
}

export const fetchRequest = (query) => {
    console.log(query)
    return (dispatch) => {
        axios(`https://forkify-api.herokuapp.com/api/search?q=${query}`)
            .then(response => {
                // console.log(response.data.recipes)
                const recipe = response.data.recipes;
                dispatch(fetchRecipe(recipe));
            })
            .catch(error => {
                console.log(error)
            })
    }
}

Answer 1

你好，我不是反应专家，但你可以做个测试。您知道，每次重新呈现组件时，都会触发use效应钩子。因此，您可以将您的console.log投入使用效果，看看是否会记录两次。类似的东西：

useEffect(() => {
   console.log(recipe);
})

如果您有两个日志，则表示Search组件被渲染两次。否则可能与reactjs工作流有关，正如我所说，我不太擅长解释为什么会记录两次。