如何將數據從子組件傳遞到父組件的 state 反應原生？

Question

家長

import Child from '../Child';

const Parent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChild = (value) => {
    setInputValue(value);
    console.log('VALUE:', value);
    console.log('STATE:', inputValue);
  };
  console.log(inputValue); //shows the same as VALUE
  return (
    <View>
      <Child passInputValue={handleChild} />
    </View>
  );
};

孩子

const Child = ({passInputValue}) => {
  const [input, setInput] = useState('');
  return (
    <View>
      <TextInput value={input} onChangeText={(text) => setInput(text)} />
      <TouchableOpacity onPress={() => passInputValue(input)}>
        <Text>SEND DATA TO PARENT</Text>
      </TouchableOpacity>
    </View>
  );
};

當我填寫輸入然后按下按鈕時，控制台會在 VALUE 中顯示我：輸入的當前值，在 STATE 中顯示輸入的先前值

“點擊 1”

價值：“隨便”

STATE：''

“點擊 2”

價值：“隨便”

STATE：“隨便”

我需要的是，當我點擊時，執行 realm 並保存 inputValue 的值，但它總是保存以前的值

我將不勝感激任何幫助：）

Answer 1

更改如下

<Child passInputValue={(value)=>handleChild(value)} />

Answer 2

這里發生的是 React 異步而不是按順序執行handleChild的行。 您調用setInputValue(value)來更改inputValue ，但在 state 更新之前console.log('STATE:', inputValue)已經開始使用以前的值執行。 更新正確進行，但您的日志在更新之前而不是之后打印值。

這就是為什么您會看到位於 function之外的console.log(inputValue)語句打印正確值的原因。 這個 function 在組件重新渲染時運行，這發生在state 更新之后，因此您在此處獲得更新的值。