javascript - 子组件从父组件获取道具导致的无限渲染

Question

我有一个获取数据然后将道具传递给子子组件的组件。这会导致子组件导致无限重新渲染。我想知道发生了什么这是我的代码的样子

const Page: FunctionComponent<pageProps> = (): JSX.Element => {
    const [userInfo, setUserInfo] = useState<userInfoStruct>();
    const [data, setData] = useState<any>();

    useEffect(() => {

       // fetch info from localstore
       setUserInfo(dataFromLocalStorage);
       fetchSomeData(); // do stuff... and setData(fetchResult)
    }, [userInfo]);

    return (
     <div>
       <ButtonsAndStuff />
       <DisplayData data={data} />
     </div>
    )
};

我的子组件看起来像这样

const DisplayData: FunctionComponent<displayDataProps> = ({ data }): JSX.Element => {
    const data_: Array<any> = data.map(d =>  (d.value))

    return (
     <div>
       {data_.map(i => {
         return (
          <div>
           {i}
          </div>
         )
       })}
     </div>
    )
};

不幸的是，我的组件不断重新渲染并做出反应，说问题来自我的子组件，特别是在子组件中获取道具的级别，即这条线

const DisplayData: FunctionComponent<displayDataProps> = ({ data }): JSX.Element => {/*... */};

我不知道此时出了什么问题。

温度

useEffect(() => {
        let userName: string = localStorage.getItem("userName");
        let user: string = localStorage.getItem("user");

        if (userName === undefined || user === undefined) {
            return;
        } else {
            setUserInfo({ user: user, userName: userName });
            setIsAuth(true);
        }

        /*  */
        if (blogData.length < 1) {
            fetchBlogData(user, blogIndex).then(result => {
                console.log(result)
               
                setBlogData(result);
            });
        } else {
            return;
        }
        /*  */
    }, []);

标签： javascriptreactjstypescript

Answer 1

您的问题似乎不是由您的子组件引起的，而是由您的这部分代码引起的：

const [userInfo, setUserInfo] = useState<userInfoStruct>();
const [data, setData] = useState<any>();

useEffect(() => {

    // fetch info from localstore
    setUserInfo(dataFromLocalStorage);
    fetchSomeData(); // do stuff... and setData(fetchResult)
}, [userInfo]);

Assuming that dataFromLocalStorage isn't just a string/number, it's probably a unique array/object every time. You alter userInfo, which therefore makes the [userInfo] dependency list change, therefore re-executing your effect, ad infinitum.

If you only want to execute the effect once, use [] as dependency list.