useState钩子不在onPress（）函数中更新我的状态

Question

我正在构建一个制表符视图，我不明白为什么useState钩子没有更新我的状态。我肯定这是件容易的事，但我在这里已经被难住了一段时间...

我可以看到onPress函数已启动，如果我注销，则item.label是正确的。但是，即使我硬编码参数，setState也不会更改。

const TabContainer = ({ tabs }) => {
  const [selected, setSelected] = useState('');

function renderItem(item, index) {
    return item.label === selected ? (
      <View style={styles.selectedTab}>
        <CustomText style={styles.tabText}>{item.label}</CustomText>
      </View>
    ) : (
      <TouchableWithoutFeedback
        key={index}
        onPress={() => {
          console.log(selected);
          setSelected(item.label);
        }}
      >
        <View style={styles.tab}>
          <CustomText style={styles.tabText}>{item.label}</CustomText>
        </View>
      </TouchableWithoutFeedback>
    );
  }

  return (
    <View style={styles.tabContainer}>
      <FlatList
        keyExtractor={(item, index) => index.toString()}
        data={tabs}
        renderItem={({ item, index }) => {
          return renderItem(item, index);
        }}
        style={styles.listContainer}
      />
    </View>
  );
};

export default TabContainer;

Answer 1

好吧，我解决了这个问题。我意识到我必须提升选项卡的状态，以便正确渲染其他内容。然后我在父组件中以同样的方式实现，然后它就工作了。。。

来自父级的重要行：

  const [selectedTab, setSelectedTab] = useState('');

  function handleTabPress(tab) {
    setSelectedTab(tab);
  }

...

<TabContainer
  tabs={[
    { label: 'Label 1' },
    { label: 'Label 2' },
    { label: 'Label 3' },
  ]}
  selectedTab={selectedTab}
  handleTabPress={handleTabPress}
/>

新生儿

const TabContainer = ({ tabs, selectedTab, handleTabPress }) => {
  function renderItem(item, index) {
    return item.label === selectedTab ? (
      <View style={styles.selectedTab}>
        <CustomText style={styles.selectedTabText}>{item.label}</CustomText>
      </View>
    ) : (
      <TouchableWithoutFeedback
        key={index}
        onPress={() => {
          handleTabPress(item.label);
        }}
      >
        <View style={styles.tab}>
          <CustomText style={styles.tabText}>{item.label}</CustomText>
        </View>
      </TouchableWithoutFeedback>
    );
  }
  return (
    <View style={styles.tabContainer}>
      <FlatList
        keyExtractor={(item, index) => index.toString()}
        data={tabs}
        renderItem={({ item, index }) => {
          return renderItem(item, index);
        }}
        style={styles.listContainer}
      />
    </View>
  );
};

Answer 2

有时，当您希望在生命周期中与构造函数不同的阶段设置值时，使用useRef而不是useState。请查看这一点，并尝试在代码中实现这一点：[https://codesandbox.io/s/v6948pww5y?from-嵌入]

Answer 3

试试这个：

<

TouchableWithoutFeedback
        key={index}
        onPress={() => onPressItem(item)}
      >
const onPressItem =(item)=>{
setSelected(item.label)}