Question

我无法更新togglelight状态尽管更改文本状态效果很好。

export default function CardImageExample (props) {

  const [text,setext] = React.useState("Open Gate")
  const [togglelight,setogglelight] = React.useState(props.data.light)

  function change(){
    setext("Gate Opened")
    db.ref('/Door').set({mainDoor : 'opened' })
    setTimeout(function(){setext("Open Gate")}, 1300)
  }

  function ToggleLights(){
    console.log("before toggle",togglelight)

    if(togglelight)
    setogglelight(false)

    else
      setogglelight(true)

    console.log("after toggle",togglelight)
  }

  return (
    <View style={{alignItems: 'center'}}>
      <Content>
        <Button rounded style={styles.button} onPress={change} >
          <Text style={styles.text}> {text} </Text>
        </Button>

        <Text>{'\n\n'}</Text>

        <ToggleSwitch
          isOn={togglelight}
          onColor="yellow"
          offColor="grey"
          label="Lights  "
          labelStyle={styles.text}
          size="medium"
          onToggle={ToggleLights}
        />


      </Content>
    </View>
  );
}

我没有理会return函数，因为其余代码工作正常……只是状态没有更新

Answer 1

您需要使用回调参数调用addEventListener才能正确访问setogglelight()的先前状态。

尝试以下操作：

togglelight

我希望这会有所帮助！

Answer 2

改变状态是异步功能

尝试将您的功能更改为此

  async function ToggleLights(){
      console.log("before toggle",togglelight)

      if(togglelight)
          await setogglelight(false)

      else
          await setogglelight(true)

      console.log("after toggle",togglelight)
  }

希望这会有所帮助

反应功能组件状态未更新

2 个答案: