Question

我目前正在使用新的React Hooks功能，并且遇到了一个问题，即即使我相信我所做的一切都正确，功能组件的状态也没有更新，这是另一对测试的关注应用程序将不胜感激。

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

const TodoList = () => {
  let updatedList = useTodoListState({ 
    title: "task3", completed: false 
  });
const renderList = () => {
  return (
    <div>
      {
        updatedList.map((item) => {
          <React.Fragment key={item.title}>
            <p>{item.title}</p>
          </React.Fragment>
        })
      }
    </div>
  )
}
return renderList();
}

function useTodoListState(state) {
  const [list, updateList] = useState([
    { title: "task1", completed: false },
    { title: "task2", completed: false }
  ]);
  useEffect(() => {
    updateList([...list, state]);
  })
  return list;
}

export default TodoList;

useTodoListState的useEffect函数中的

updateList应该更新list变量以容纳三段数据，但是事实并非如此。

Answer 1

您在这里遇到一些问题：

在"Principal": "*"中，您滥用renderList。应该使用它包装多个DOM节点，以便组件仅返回一个节点。您正在将各个段落元素包装在各自的“片段”中。
在React.Fragment的每次迭代中都需要返回某些信息。这意味着您需要使用map关键字。（有关箭头函数语法的更多信息，请参见this question。）
您的代码将无限更新，因为return正在更新其自身的挂钩状态。为了解决这个问题，您需要在useEffect中包含一个数组作为第二个参数，这将告诉React仅在给定数组发生更改时才使用该效果。

这是所有看起来都应该是这样的（经过重新格式化）：

useEffect

编辑：
尽管我已经测试了上面的代码可以工作，但是最终最好重新构造结构以从import React, { useState, useEffect } from 'react'; const TodoList = () => { let updatedList = useTodoListState({ title: "task3", completed: false }); return ( <React.Fragment> // #1: use React.Fragment to wrap multiple nodes { updatedList.map((item) => { return <p key={item.title}>{item.title}</p> // #2: return keyword inside map with braces }) } </React.Fragment> ) } function useTodoListState(state) { const [list, updateList] = useState([ { title: "task1", completed: false }, { title: "task2", completed: false } ]); useEffect(() => { updateList([...list, state]); }, [...list]) // #3: include a second argument to limit the effect return list; } export default TodoList;中删除updateList或实现另一个变量来控制更新。

使用React Hooks时状态未更新

1 个答案: