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

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

Answer 1

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

：

public class Main {

public static void main(String[] args) {


    char[] alphabet = {'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'};

    Map<Integer, String> map = new HashMap<>();
    map = alphabetFrom0Index(alphabet);
//        printIndexAndLetters(alphabetFrom0Index(alphabet));

    String test = "Does it work";
    String test2 = "abc xyz";
    System.out.println(returnIndexNumbers(map, test));  // 15 5 19 9 20 23 15 18 11
    System.out.println(returnIndexNumbers(map, test2)); // 1 2 3 24 25 26

}

// return a string whit the index o letter from the alphabet from a map
public static String returnIndexNumbers(Map<Integer, String> map, String test) {
    // we create a stringBuilder for not creating every time a string
    StringBuilder result = new StringBuilder();
    test.toLowerCase();
    // we iterate the string
    for (int i = 0; i < test.length(); i++) {
        // save the letter into a string from a char
        String letter = String.valueOf(test.charAt(i));

        // iterate over map, and if it match save the index to string
        for (Map.Entry<Integer, String> entry : map.entrySet()) {
            if (letter.equals(entry.getValue())) {
                result.append(entry.getKey()+ " ");
            }
        }

    }
    // convert stringBuilder to a string. Wrapper
    return String.valueOf(result);
}


// for every character from the alphabet starting from 0
// we give them an index (0 - 25)
public static Map<Integer, String> alphabetFrom0Index(char[] alphabet) {
    // we defined a map that contains a pair of key-value
    // key is the index of the character & value is the character itself
    Map<Integer, String> map = new HashMap<>();

    for (int i = 0; i < alphabet.length; i++) {
        // i is the position of the character from the array
        // and i+1 to start from 1, and not from 0
        map.put(i+1, String.valueOf(alphabet[i]));
    }
    return map;
}

// print index and letter from a map
public static void printIndexAndLetters(Map<Integer, String> map) {
    map.entrySet().stream().forEach((Map.Entry<Integer, String> entry) -> {
        System.out.println(entry.getKey() + " " + entry.getValue());
    });
}

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

Answer 2

尝试一下：

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

Answer 3

事件onEndEditing接受函数调用只需更新即可调用箭头功能：

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

Answer 4

对我来说，我是在 useEffect 钩子之外更新活动标题。当我移动代码

进入useEffect hook，错误就消失了。

无法从其他组件的功能主体内部更新组件-React Native？

4 个答案: