javascript - React 功能组件状态未更新

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

我没有使用返回函数，因为其余代码工作正常......只是状态没有更新

标签： javascriptreactjsreact-native

Answer 1

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

尝试如下：

function ToggleLights() {
   setogglelight(prevLight => !prevLight);
}

我希望这有帮助！