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”

值： “随便”

状态： ''

“点击 2”

值： “随便”

状态： “随便”

我需要的是，当我点击时，执行realm并保存inputValue的值，但它总是保存之前的值

我将不胜感激:)

Answer 1

更改如下

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

Answer 2

这里发生的事情是 React 异步而不是按顺序执行 handleChild 行。您调用 setInputValue(value) 来更改 inputValue，但在状态更新之前 console.log('STATE:', inputValue) 已经开始使用先前的值执行。更新正确进行，但您的日志打印的是更新前而不是更新后的值。

这就是为什么您会看到 console.log(inputValue) 语句在打印正确值的函数的外部。这个函数在组件重新渲染时运行，它发生在状态更新之后，所以你在这里得到更新的值。

如何将数据从子组件传递到父组件的状态反应原生？

2 个答案: