Question

我正在构建一个选项卡视图，但无法弄清楚useState-hook为什么不更新我的状态。我相信这很容易，但是我已经被困在这里一段时间了……

我看到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

尝试一下：

<

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

Answer 2

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

Answer 3

Okey我已经解决了这个问题。我意识到，为了正确渲染其他内容，我必须提高标签的状态。所以然后我以相同的方式在父组件中实现，然后就可以了...

来自父级的重要行：

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

useState-hook不会在onPress（）函数中更新我的状态

3 个答案: