状态变量显示值 'undefined' 虽然已设置默认值 'false'

Question

我创建了一个自定义组件 MyCustomList，它只是 FlatList 的包装器。共有三个道具items、getMore、loading。此 post 仅关注传入的 loading 道具。

const MyCustomList = ({items, getMore, loading}) => {
      // console shows 'false'
      console.log(loading) 
      
      // use the 'loading' as the default value for the state variable
      const [isLoading, setIsLoading] = useState(loading);

      const myFooter = () => {
           // console shows undefined, why? Shouldn't it be the default value 'false'?
           console.log(isLoading});
            ...
      }
      return (
          <FlatList
            keyExtractor={keyExtractor}
            data={items}
            renderItem={renderItem}
            onEndReached={getMore}
            onEndReachedThreshold={0}
            ListFooterComponent={myFooter}
    />
  );
  ...
  export default MyCustomList;
}

在上面的自定义组件中，父组件传入了值为false的loading属性，在运行时当滑动列表到底部时，myFooter被调用但是状态变量isLoading 的记录值为 undefined。为什么？

Answer 1

只改成这个

const MyCustomList = ({items, getMore, loading = false}) => {

.....

Answer 2

像下面这样更改您的代码，我们在 useEffect

中设置 isLoading 状态

 import React, { useState, useEffect } from 'react';//add
 
 const MyCustomList = ({items, getMore, loading}) => {
           // console shows 'false'
           console.log(loading) 
           
           // use the 'loading' as the default value for the state variable
           const [isLoading, setIsLoading] = useState(loading);
     
           useEffect(() => {
             setIsLoading(loading)
            }, []);
 
           const myFooter = () => {
                // console shows undefined, why? Shouldn't it be the default value 'false'?
                console.log(isLoading});
                 ...
           }
           return (
               <FlatList
                 keyExtractor={keyExtractor}
                 data={items}
                 renderItem={renderItem}
                 onEndReached={getMore}
                 onEndReachedThreshold={0}
                 ListFooterComponent={myFooter}
         />
       );
       ...
       export default MyCustomList;
     }

状态变量显示值 'undefined' 虽然已设置默认值 'false'

State variable shows value 'undefined' though have set default value 'false'

reactjs

react-native

use-state

react-state-management