Question

我正在尝试渲染FlatList：

  <FlatList
    removeClippedSubviews
    numColumns={1}
    {...{ data }}
    extraData={this.state}
    renderItem={object => renderItem(object)}
  />

它当然可以与以下功能配合使用。

function renderItem(object) {
  return <Text>Test</Text>;
}

但是，在添加React Hooks时，例如：

function renderItem(object) {
  const [foo, setFoo] = useState("bar");
  return <Text>{foo}</Text>;
}

RN返回：

Hooks can only be called inside the body of a function component.

钩子可以在代码库中的其他地方使用，因此这不是程序包不匹配的问题。任何帮助表示赞赏。

Answer 1

您不能在功能组件内部调用挂钩。您可以将功能转换为功能组件

  <FlatList
    removeClippedSubviews
    numColumns={1}
    {...{ data }}
    extraData={this.state}
    renderItem={object => <TextComponent item={object} />}
  />


function TextComponent ({item}) {
  const [foo, setFoo] = useState("bar");
  return <Text>{foo}</Text>;
}

Answer 2

这是使用钩子时的规则之一，不能像这样声明hook。

您必须在顶层声明该钩子。如果这样做，React将无法理解这是一个hook。

以下是使用钩子时需要遵循的规则 https://reactjs.org/docs/hooks-rules.html

Answer 3

您的renderItem示例不起作用的原因是该函数既不大写也不以use开头。这不是特殊的javascript，只是React团队定义的约定。如果更改为function RenderItem，则不会出现钩子错误。 renderItem 是组件，因为它接收数据并返回JSX，只需要适当大写使用钩子即可。

然后您可以执行renderItem={RenderItem}。

React Native：在平面列表中使用挂钩

3 个答案: