平面列表渲染项的 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}
               />
};

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

谢谢问候。 阿莫尔

Answer 1

您将RenderEntity 用作function 而不是functional component：

改变这个

renderItem={RenderEntity({ getEntityName })}

与：

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