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

【问题标题】：how to pass data from child component to state of parent component react native?如何将数据从子组件传递到父组件的状态反应原生？
【发布时间】：2021-01-23 22:11:50
【问题描述】：

家长

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的值，但它总是保存之前的值

我会很感激任何帮助:)

【问题讨论】：

标签： javascript react-native react-hooks state

【解决方案1】：

如下修改

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

【讨论】：

这不是必需的，因为handleChild 已经是一个箭头函数。

【解决方案2】：

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

这就是为什么你会看到console.log(inputValue) 语句在打印正确值的函数之外。此函数在组件重新渲染时运行，这发生在状态更新之后，因此您将在此处获取更新后的值。

【讨论】：