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

Question

我有一个子组件“文本输入”，并将值作为 Prop 传递给这样

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>
  );
}

在Parent中，我从child那里得到了值

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} />

我看到这个 issue但我已经在使用 React 16.13.1

Answer 1

TextInputs 属性 onEndEditing 接受 a function that is called when text input ends. .您传递的不是函数，而是组件呈现时调用的 props.saveMobileNumber 函数的结果。尝试传递一个调用 saveMobileNumber 的函数:

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

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