Question

我正在尝试在参数更改时映射我的 redux 数组。它按预期呈现，但我在控制台中收到此错误。尝试了一些对 useEffect 的依赖，但无法修复它。不知道为什么会发生这种情况。感谢您的帮助。

错误;

<块引用>

已超出最大更新深度。当组件调用时可能会发生这种情况 setState 在 useEffect 中，但 useEffect 要么没有依赖项数组，或者每次渲染时依赖项之一都会发生变化。

我的代码;

    const AuthorProfile = () => {
      const params = useParams();
      const posts = useSelector(state => state.redux);
      const [postsArray, setpostsArray] = useState([]);
      const { location, history } = useReactRouter();
    
      useEffect(() => {
        if (posts.REDUX_POSTS.length) {
          setpostsArray(
            posts.REDUX_POSTS.filter(e => e.authorId === parseInt(params.id)),
          );
        }
      }, [params, posts]);
    
      const openPost = (id) => {
    history.push('/app/posts/read/' + id)
  }

  return (
    <div className="PostContainer">
      <ul className="Posts">
        {postsArray.length &&
          postsArray.map(e => (
            <li key={e.id} onClick={() => openPost(e.id)}>
              <img src={e.image ? e.image : e.authorIcon ? e.authorIcon : 
  NoAuthor} />
              <span className="PostTitle">{e.message}</span>
            </li>
          ))}
      </ul>
    </div>
  )
}

Answer 1

在这种情况下，您不需要维护冗余状态 (postsArray)，它纯粹是从您的 redux 数据派生的状态。所以只需计算它。这还将帮助您摆脱由 useEffect 钩子引起的无限循环。

const params = useParams();
const posts = useSelector(state => state.redux);
const { location, history } = useReactRouter();
    
const postsArray = posts.REDUX_POSTS.filter(e => e.authorId === parseInt(params.id));

React hooks 超出最大更新深度错误

1 个答案: