reactjs - react native : Using Hooks in Flatlist

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.

Hook 在代码库的其他地方工作，因此这不是包不匹配问题。 非常感谢任何帮助。

Answer 1

您不能在功能组件内调用钩子(Hook)。您可以将函数转换为函数组件

  <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>;
}