无效的 Hook 调用 - React Hooks答案

【问题标题】：Invalid Hook Call - React Hooks无效的 Hook 调用 - React Hooks
【发布时间】：2020-11-28 15:49:49
【问题描述】：

我对 JS 和 React 真的很陌生。我收到此错误： Invalid Hook Call 当我尝试使一个组件出现并在单击另一个组件时消失时。这是我的代码：

const RenderList = ({data}) => {
    return data.map((option, index) => {
        return <Item title={option}/>
    });
};

const Header = ({ title, style, press }) => (
    <TouchableHighlight onPress={press}>
        <Text  style={style} >{title}</Text>
    </TouchableHighlight>
)

const RenderItem = ( {item} ) => {
    console.log(styles)

    let dataToShow;
    
    const [listState, setListState] = useState(true);

    if (listState){
        dataToShow = <RenderList data={item.data}/>
    } else {
        dataToShow = <Text/>
    }

    return (
        <View style={styles.section}>
            <Header title={item.title} style={styles.header} press={setListState(!listState)}/>
            {dataToShow}
        </View>
)}

编辑 RenderItem 在平面列表元素中用作函数。（据我了解）

const SettingsSection = (props) => {
    const db = props.data;

    return(
        <View>
            <FlatList 
                style={styles.sectionList}
                data={db}
                renderItem={RenderItem}
                keyExtractor={item=>item.title}  
                ItemSeparatorComponent={FlatListItemSeparator}          
            />            
        </View>
    );
}

【问题讨论】：

对不起，我忘了，我会用信息编辑我的问题:)

标签： javascript node.js reactjs react-native react-hooks

【解决方案1】：

我认为问题是由于setListState(!listState) 按下而发生的。我建议您将状态更改方法包装到一个函数中。因为onPress 只接受函数类型，但你给它一个来自钩子的返回语句。

const RenderList = ({data}) => {
    return data.map((option, index) => {
        return <Item title={option}/>
    });
};

const Header = ({ title, style, press }) => (
    <TouchableHighlight onPress={press}>
        <Text  style={style} >{title}</Text>
    </TouchableHighlight>
)

const RenderItem = ( {item} ) => {
    console.log(styles)

    let dataToShow;
    
    const [listState, setListState] = useState(true);

    if (listState){
        dataToShow = <RenderList data={item.data}/>
    } else {
        dataToShow = <Text/>
    }

    return (
        <View style={styles.section}>
            <Header 
                   title={item.title} 
                   style={styles.header}
                   press={()=>{
                       setListState(!listState)
                   }}
             />
            {dataToShow}
        </View>
)}

【讨论】：

【解决方案2】：

renderItem，顾名思义，是一个render prop，因此被直接调用（如：renderItem({item})），而不是作为组件实例化（如：<RenderItem item={item}/>）。

这意味着 React 没有为钩子工作创建适当的渲染“上下文”。你可以确保你的 RenderItem 函数被实例化为一个组件，方法是在 render prop 上像这样使用它：

<FlatList 
    style={styles.sectionList}
    data={db}
    renderItem={item => <RenderItem {...item}/>} // see here!
    keyExtractor={item=>item.title}  
    ItemSeparatorComponent={FlatListItemSeparator}          
/>

这样，RenderItem 被视为一个组件，因此可以使用钩子。

【讨论】：