reactjs - 平面列表渲染项的 React-Native 无效挂钩调用

Question

所以我有一个 react-native 平面列表，我在每个列表中都使用了钩子FlatList renderItem，就像这样，

export const RenderEntityList = (props) => {
    const { entityList } = props;
    const getEntityName = useCallBack((entity) => {
        //...get Entity name from list
    }, [entityList]);
    return <FlatList
              data={entityList}
              renderItem={RenderEntity({ getEntityName })}
           />
};


const RenderEntity = (props) => {
    const { getEntityName } = props;
    return (props) => {
        const { item: entity } = props;
        // This is where i get the error Invalid hook call;
        const [entityName, setEntityName] = useState('');
        useEffect(() => {
            setEntityName(getEntityName(entity))
        }, [entity])
        return <ListItem
                  title={entityName}
               />
};

我不确定我到底做错了什么。对此的任何帮助将不胜感激。

感谢和问候。阿莫尔

标签： reactjsreact-nativereact-hooks

Answer 1

您正在使用RenderEntityasfunction而不是 a functional component：

改变这个

renderItem={RenderEntity({ getEntityName })}

和 ：

renderItem={({item, index, separators}) => <RenderEntity item={item} getEntityName={getEntityName}/> }