Javascript 每次渲染后将调用哪个useEffect？

我是React的初学者，遇到了一些问题。我对这段代码有几个疑问

每次渲染后将调用哪个UseEffect

为什么以及如何调用console.log（）13次？（请查看下面的屏幕截图）

为什么取回的数据在我在搜索栏中键入内容之前不会显示在浏览器中

App.js

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

 function App() {
   const [monster, setMonster] = useState([]);
   const [searchName, setName] = useState("");
   const [filteredMonster, setFilter] = useState([]);

   useEffect(() => {
      async function fetchData() {
        await axios.get(
           "https://jsonplaceholder.typicode.com/users"
        ).then((resp)=>{
           setMonster(resp.data);
        })
        console.log(monster);
      }

      fetchData();
   }, []);

   useEffect(()=>{
      const mons = monster;
      setFilter(mons.filter(mon =>
         mon.name.toLowerCase().includes(searchName.toLowerCase())
      ));
   }, [searchName]);

   function changeName(event) {
      setName(event.target.value);
   }

   console.log(monster);

   const cunter = useRef(0);
   return (
      <div className="App">
         <form>
            <input
               type="search"
               name="searchName"
               value={searchName}
               onChange={changeName}
            />
         </form>

        {cunter.current++}

         {filteredMonster&&filteredMonster.map((item, index) => (
            <p key={index}>{item.name}</p>
         ))}

         {monster&&!filteredMonster&&monster.map((item, index) => (
            <p key={index}>{item.name}</p>
          ))}
      </div>
   );
 }

 export default App;

import React，{useffect}来自“React”；
从“react”导入{useState}；
从“axios”导入axios；
函数App（）{
const[monster，setMonster]=useState（[]）；
const[searchName，setName]=useState（“”）；
常量[filteredMonster，setFilter]=useState（[]）；
useffect（（）=>{
异步函数fetchData（）{
等待axios(
"https://jsonplaceholder.typicode.com/users"
)。然后（（resp）=>{
setMonster（相应数据）；
})
控制台日志（怪物）；
}
fetchData（）；
}, []);
useffect（（）=>{
const mons=怪物；
setFilter（mons.filter（mon=>
mon.name.toLowerCase（）.includes（searchName.toLowerCase（））
));
}，[searchName]）；
函数changeName（事件）{
setName（event.target.value）；
}
控制台日志（怪物）；
const-cunter=useRef（0）；
返回(
{cunter.current++}
{filteredMonster&&filteredMonster.map（（项，索引）=>(
{item.name}
))}
{monster&&！filteredMonster&&monster.map（（项目，索引）=>(
{item.name}
))}
);
}
导出默认应用程序；

请试试这个。fetchData（）将仅运行1次，searchName将运行您在屏幕上键入的次数

提示：为了防止这种情况。在用户完成键入后添加timeoutdelay以仅渲染一次，而不是用户按键盘键N次

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

const URL = "https://jsonplaceholder.typicode.com/users"

function App() {
    const [monster, setMonster] = useState([]);
    const [searchName, setName] = useState("");
    const [filteredMonster, setFilter] = useState([]);

    useEffect(() => {
        async function fetchData() {
            await axios.get(URL).then((resp) => {
                setMonster(resp.data);
            })
            console.log(monster);
        }

        fetchData();
    }, []);

    useEffect(() => {
        if (monster.length > 0) {
            const filter = mons.filter(({name}) =>
                name.toLowerCase().includes(searchName.toLowerCase()));
            setFilter(filter);
        }

    }, [searchName]);

    function changeName(event) {
        setName(event.target.value);
    }

    console.log(JSON.stringify(monster));

    return (
        <div className="App">
            <form>
                <input
                    type="search"
                    name="searchName"
                    value={searchName}
                    onKeyUp={(e) => changeName(e)}
                />
            </form>

            {monster.length > 0 &&
                <div>{JSON.stringify(monster)}</div>
            }

            {filteredMonster && filteredMonster.map((item, index) => (
                <p key={index}>{item.name}</p>
            ))}

            {monster && !filteredMonster && monster.map((item, index) => (
                <p key={index}>{item.name}</p>
            ))}
        </div>
    );
}

export default App;

import React，{useffect}来自“React”；
从“react”导入{useState}；
从“axios”导入axios；
常量URL=”https://jsonplaceholder.typicode.com/users"
函数App（）{
const[monster，setMonster]=useState（[]）；
const[searchName，setName]=useState（“”）；
常量[filteredMonster，setFilter]=useState（[]）；
useffect（（）=>{
异步函数fetchData（）{
等待axios.get（URL）。然后（（resp）=>{
setMonster（相应数据）；
})
控制台日志（怪物）；
}
fetchData（）；
}, []);
useffect（（）=>{
如果（怪物长度>0）{
const filter=mons.filter（{name}）=>
name.toLowerCase（）.includes（searchName.toLowerCase（））；
设置过滤器（过滤器）；
}
}，[searchName]）；
函数changeName（事件）{
setName（event.target.value）；
}
log（JSON.stringify（monster））；
返回(
更改名称（e）}
/>
{monster.length>0&&
{JSON.stringify（monster）}
}
{filteredMonster&&filteredMonster.map（（项，索引）=>(
{item.name}
))}
{monster&&！filteredMonster&&monster.map（（项目，索引）=>(
{item.name}
))}
);
}
导出默认应用程序；

这是使用减速机，删除使用状态

import React, { useEffect, useReducer } from "react";
import axios from "axios";

const URL = "https://jsonplaceholder.typicode.com/users"

const reducer = (state, action) => {
    switch(action.type){
        case 'FETCH_DATA':
            return {
                ...state,
                monster: action.monster,
                name: "",
            }
        case 'SEARCH_MONSTER':
            return {
                ...state,
                name: action.name,
            }
        case 'FILTER_MONSTER':
            const filter = state.monster.filter(({name}) =>
                name.toLowerCase().includes(searchName.toLowerCase()));
            return {
                ...state,
                filteredMonster: filter,
                name: state.name,
            }
    }
};

function App() {

    const [state, dispatch] = useReducer(reducer, {
        monster: [],
        filteredMonster: [],
        name: '',
    });

    useEffect(() => {
        async function fetchData() {
            await axios.get(URL).then((resp) => {
                dispatch({ type: 'FETCH_DATA', monster: resp.data});
            })
            console.log(monster);
        }
        fetchData();
    }, []);

    useEffect(() => {
        if (monster.length > 0)  dispatch({ type: 'FILTER_MONSTER'});
    }, [stat.name]);

    console.log(JSON.stringify(monster));

    return (
        <div className="App">
            <form>
                <input
                    type="search"
                    name="searchName"
                    value={state.name}
                    onKeyUp={(e) => dispatch({ type: 'SEARCH_MONSTER', name: e.target.value })}
                />
            </form>

            {state.monster.length > 0 &&
                <div>{JSON.stringify(monster)}</div>
            }

            {state.filteredMonster && state.filteredMonster.map((item, index) => (
                <p key={index}>{item.name}</p>
            ))}

            {state.monster && !state.filteredMonster && monster.map((item, index) => (
                <p key={index}>{item.name}</p>
            ))}
        </div>
    );
}

export default App;

从“React”导入React，{useffect，useReducer}；
从“axios”导入axios；
常量URL=”https://jsonplaceholder.typicode.com/users"
const reducer=（状态、操作）=>{
开关（动作类型）{
案例“获取数据”：
返回{
……国家，
怪物：行动，怪物，
姓名：“，
}
“搜索怪物”案例：
返回{
……国家，
名称：action.name，
}
“过滤怪物”案例：
const filter=state.monster.filter（{name}）=>
name.toLowerCase（）.includes（searchName.toLowerCase（））；
返回{
……国家，
filteredMonster:过滤器，
名称：state.name，
}
}
};
函数App（）{
const[state，dispatch]=useReducer（减速机{
怪物：[]，
filteredMonster:[]，
名称：“”，
});
useffect（（）=>{
异步函数fetchData（）{
等待axios.get（URL）。然后（（resp）=>{
分派（{type:'FETCH_DATA'，monster:resp.DATA}）；
})
控制台日志（怪物）；
}
fetchData（）；
}, []);
useffect（（）=>{
如果（monster.length>0）分派（{type:'FILTER_monster'}）；
}，[stat.name]）；
log（JSON.stringify（monster））；
返回(
分派（{type:'SEARCH_MONSTER'，name:e.target.value}）}
/>
{state.monster.length>0&&
{JSON.stringify（monster）}
}
{state.filteredMonster&&state.filteredMonster.map（（项，索引）=>(
{item.name}
))}
{state.monster&&！state.filteredMonster&&monster.map（（项目，索引）=>(
{item.name}
))}
);
}
导出默认应用程序；

1。每次渲染后将调用哪个UseEffect？

Ans:根据

useffect

的说法，它关注3种生命周期方法，即

componentDidMount

componentdiddupdate

和

componentWillUnmount

。因此，无论您有多少个

useffect

，当componentMount第一次安装时，所有的效果挂钩都将执行。但是

useffect

将进一步执行，只有当它的依赖项得到更新时，它才会忽略

2。为什么以及如何调用console.log（）13次？

const cunter = useRef(0);

{monster && !filteredMonster && monster.map((item, index) => (
     <p key={index}>{item.name}</p>
))}

{(monster && filteredMonster.length === 0) && monster.map((item, index) => (
         <p key={index}>{item.name}</p>
))}