无法从不同组件的函数体内部更新组件 - React Native？

Question

我有一个子组件“文本输入”并将值传递给像这样的道具

export default function MobileInput(props) {
  const [mobileNumber, setMobileNumber] = React.useState('');

  return (
    <View style={styles.inputBox}>
        <TextInput
          value={mobileNumber}
          onChangeText={(number) => setMobileNumber(number)}
          onEndEditing={props.saveMobileNumber(mobileNumber)} // here
        />
    </View>
  );
}

在父母中，我从孩子那里得到了价值

const [mobile, setMobile] = useState('');


const getMobile = (number) => {
    number ? setMobile(number) : null; // here's I got this warnning
    console.log('getMobile-number-from-child', number);
  };


const reSendMobile = () => { // other function I want to call passed on mobile number I got from child component 
    if (mobile?.length) {
      alert('Done');
      setReSend(false);
      setSeconds(10);
    } else {
      alert('Please write your number before press send!');
    }
  };


<MobileInput saveMobileNumber={getMobile} />

我看到这个问题但我已经在使用 React16.13.1

Answer 1

TextInputs 属性 onEndEditing 接受在文本输入结束时调用的函数。. 您传递的是在组件呈现时调用的 props.saveMobileNumber 函数的结果，而不是函数。尝试传递一个调用 saveMobileNumber 的函数：

onEndEditing={() => props.saveMobileNumber(mobileNumber)}

如果您避免在多个组件中保持相同的状态，您的代码将更易于阅读/调试。您可以通过 props 将 mobile 和 setMobile 传递给孩子，而不必为相同的数据创建单独的状态。