Javascript 如何基于变量值使useEffect react钩子重渲染器生效？

所以我得到了这个组件：

export default function () {
    const [todos, setTodos] = useState([]);


    useEffect(() => {
        function populateTodos () {
            axios.get(`http://localhost:8000/api/all-todos`)
                .then(res => setTodos(res.data))
                .catch(err => console.log(err));
        }

        populateTodos();
    }, []);

    console.log(todos);

    return (
        <div>
            ...
        </div>
    );
}

导出默认函数（）{
const[todos，setTodos]=useState（[]）；
useffect（（）=>{
函数populateTodos（）{
axios.get(`http://localhost:8000/api/all-待办事项`）
.然后（res=>setTodos（res.data））
.catch（err=>console.log（err））；
}
populateTodos（）；
}, []);
控制台日志（todos）；
返回(
...
);
}

我正在使用

useffect

钩子从数据库中获取所有TODO，它工作正常。问题是，我不知道如何使用

useffect

在任何时候修改todos数组（如添加、删除或更新）时触发重新渲染器。如果我为

useffect

的依赖项数组提供

todos

变量，我将在控制台中获得一个无限循环日志记录。

---

我如何使用

useffect

在

todos

数组更新时触发重新渲染器？

问题是useffect内部没有逻辑请参见下面的代码

const[todos，setTodos]=useState（[]）；
useffect（（）=>{
setTodos（[1]）
}，[待办事项]）

这也将产生一个无限循环。但我们总是给予同样的价值。问题是当它被更新时，依赖关系为true，因此它再次开始执行useffect（）。你必须想出一些具体的逻辑，比如

length

被改变了，或者你可以采取一种新的状态，就像下面这个吼叫

const[todos，setTodos]=useState（[]）；
const[load，setLoad]=使用状态（false）；
useffect（（）=>{
函数populateTodos（）{
axios.get(`http://localhost:8000/api/all-待办事项`）
.然后（res=>setTodos（res.data））
.catch（err=>console.log（err））；
}
populateTodos（）；
}，[加载]）
控制台日志（todos）
返回(
{
待办事项推送（1）
设置加载（！加载）
}}
>席尔克
);

您可以通过获取父组件中的TODO，然后将结果作为道具传递给其useEffect依赖于它的子组件来解除状态。为了更新列表，必须在父组件内调用任何CRUD操作（但是可以通过将这些函数传递给子组件来触发子组件的修改）

否则，这也是Redux的一个很好的应用程序。您可以使用Redux fetch操作初始化组件，以使用对任何组件执行的所有CRUD操作填充存储，还可以通过修改reducer的API响应更新存储。然后，您可以使用存储作为useEffect依赖项来更新组件的本地todo状态

// State
const [todos, setTodos] = useState(null);
// Redux Stores 
const todoStore = useSelector(state => state.todoStore);
// Redux Dispatch
const dispatch = useDispatch();
// Lifecycle: initialize the component's todolist
useEffect(() => {
    if (!todos) {
        // your Redux Action to call the API fetch & modify the store
        dispatch(fetchTodos); 
    }
}, [dispatch, todos]
// Lifecycle: update the todolist based on changes in the store
// (in this case I assume the data is populated into todoStore.items)
useEffect(() => {
    if (todoStore.items.length > 0) {
        setTodos(todoStore);
    }
}, [todoStore.items]

return {
    <div>{ todos.map((todo, index) => <li key={'todo_'+index}>{todo}</li>) }</div>
}

//状态
const[todos，setTodos]=useState（null）；
//Redux商店
const todoStore=useSelector（state=>state.todoStore）；
//重复调度
const dispatch=usedpatch（）；
//生命周期：初始化组件的todolist
useffect（（）=>{
如果（！todos）{
//调用API获取和修改存储的Redux操作
调度（TODOS）；
}
}，[发送，待办事项]
//生命周期：根据存储中的更改更新todolist
//（在本例中，我假设数据填充到todoStore.items中）
useffect（（）=>{
如果（todoStore.items.length>0）{
setTodos（todoStore）；
}
}，[todoStore.items]
返回{
{todos.map（（todo，index）=>
{todo}
）
}

我想如果您添加

{todos.length}

例如，在

元素之间，它将首先向您显示

0

，然后在

setTodos

更改

todos

状态的值并表示下一个长度时重新运行。它不起作用。谢谢。您可能在控制台上有任何错误吗？您能说明您的意思吗“对todos数组进行修改”？可能问题就在那里，而不是在给定的代码中。在这种情况下，您需要集中状态。有几种方法可以做到这一点：将状态提升到父组件，使用上下文API，设置存储管理库（如Redux）…Md.Moshfikr Rahman Rony，感谢您的回答，但您的解决方案导致了相同的问题。您通过在useEffect依赖项的作用域之外指定一个变量来欺骗useEffect依赖项。要将负载作为依赖项使用，您必须首先在useEffect中使用它。只有在负载发生更改且负载发生更改时，才会调用useEffect我们的控件，因为它永远不需要在useEffect内部进行更改。如果您仍然存在相同的问题，您可以创建一个codesandbox吗？这是我的代码工作原理，请在删除、添加和更新时更改负载