反应挂钩超过最大更新深度错误

Question

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

错误；

超过最大更新深度。当组件在useEffect中调用setState时，可能会发生这种情况，但useEfect要么没有依赖项数组，要么在每次渲染时都会更改其中一个依赖项。

我的代码；

    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));