反应本机状态更新

Question

基本上，当 isLoading 从 false true 更改为显示最新更改时，我会再次呈现表单。 当我简单地呈现 {EntryFee} 的 Textview 时，它会很好地更新文本，但是 CreateTextInput 中输入的状态值未更新。我这样设置状态：

   const [EntryFee, onChangeEntryFee] = useState("");

我检索值并设置 EntryFee：

useEffect(() => {
        var data = getData();
        data.then((d)=>{;
        onChangeEntryFee(d['entry_fee']);
        setIsLoading(true);


     })
  }, []);

 

我传入了变量 EntryFee：

        <CreateTextInput
        style={styles.Label}
        input={EntryFee}
        editable={editable}
        nameOfInput={"Entry Fee Per Hour"}
        MaterialIcons={"person"} toolTipText={"The charging fee that occurs during the first hour entry of carpark"}
        inputFunction={onChangeEntryFee}
        confirmInputFunction={EFValidate}
        />

创建文本输入：

export function CreateTextInput({ value,nameOfInput, icontype, toolTipText, inputFunction, confirmInputFunction }) {
  const [input, setInput] = useState(value);
  const [inputColor, setInputColor] = useState("rgba(0,0,0,1)");

  const [toolTipVisible, setToolTipVisible] = useState(false);
  const [toolTipDesc, setToolTipDesc] = useState(toolTipText);
  const [nameToolTipColor, setToolTipColor] = useState(false);

  function validateInput() {
    if ((input == null) || (input == "")) {
      confirmInputFunction(false);
      setInputColor("rgba(255,0,0,1)")
    } else {
      inputFunction(input)
      confirmInputFunction(true);
      setInputColor("rgba(0,255,0,1)")
    }
  }

  return (
    <View style={{ flexDirection: 'column', width: '100%', paddingLeft: '10%', marginTop: '10%' }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', height: 33, marginBottom: -9 }}>
        <MaterialIcons name={icontype} size={18} color="black" />
        <Text> {nameOfInput}</Text>
        <View style={{ marginLeft: '2%' }}>
          <Tooltip
            arrowSize={{ width: 15, height: 8 }}
            backgroundColor="rgba(0,0,0, 0.5)"
            isVisible={toolTipVisible}
            content={<Text>{toolTipDesc}</Text>}
            placement="top"
            topAdjustment={-25.5}
            onClose={() => setToolTipVisible(false)}
          >
            <View>
              <TouchableOpacity onPress={() => setToolTipVisible(true)}>
                <MaterialIcons name="info-outline" size={18} color={toolTipVisible ? 'white' : 'red'} />
              </TouchableOpacity>
            </View>
          </Tooltip>
        </View>
      </View>
      <TextInput
        style={[styles.inputPassword, { borderBottomColor: inputColor }]}
        onSubmitEditing={Keyboard.dismiss}
        onChangeText={setInput}
        onBlur={validateInput}
        value={input} />
    </View>
  )
}

const styles = StyleSheet.create({
  input: {
    height: 40,
    width: '90%',
    marginBottom: '10%',
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: 'black',
  },
  inputPassword: {
    height: 40,
    width: '90%',
    marginBottom: '10%',
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: 'black',
  },
});