reactjs - 当父属性更改时，FlatList 项目不会重新渲染

Question

我有一个具有 FlatList 的组件，并且 Prop 从父组件传递到其中，如下所示。

父组件

const Parent = (props) => {
  const [currentValue, setCurrentValue] = useState(0);
  // Changes are detected here
  console.log(currentValue)
  return (
    <FlatListContainer
      currentValue={currentValue}
      setCurrentValue={setCurrentValue}
    />
  );
};

FlatListContainer 组件

const FlatListContainer = (props) => {
  const { currentValue, setCurrentValue } = props;

  return (
    <FlatList
      data={data}
      keyExtractor={item => `${item.id}`}
      renderItem={({ item, index }) => (
        <OptionItem
          label={item.name}
          value={item.id}
          currentValue={currentValue}
          onPress={setCurrentValue}
        />
      )
      }
    />
  );
};

为了简单起见，我没有包括如何检索数据。

OptionItem如下。

OptionItem 组件

const OptionItem = (props) => {
  const { label, onPress, value, currentValue } = props;

  const _onPress = () => {
    onPress(value);
  };

  return (
    <TouchableOpacity
      activeOpacity={0.6}
      onPress={_onPress}
    >
      {/* CONTENT HERE */}
      <Text>{label}</Text>
      {value === currentValue ? 'Selected' : 'Not Selected'}
    </TouchableOpacity>
  );
};

当我在 OptionItem 组件中使用 console.log(currentValue) 时，我没有看到单击时值的变化。 如何在 FlatListContainer 和父组件中检测到更改。

如何让 OptionItem 组件检测到此更改并相应地更改其内容

Answer 1

将 extraData={currentValue} 添加到平面列表中。 Flatlist 仅在数据更改或 extraData 更改时重新渲染。

额外数据

用于告诉列表重新渲染的标记属性(因为它实现了 PureComponent)。如果您的任何 renderItem、Header、Footer 等函数依赖于 data prop 之外的任何内容，请将其粘贴在这里并以不变的方式对待它。

https://facebook.github.io/react-native/docs/flatlist.html#extraData