Проблема с ловушкой useDispatch - React Native / Redux - PullRequest
Новая
       35

Проблема с ловушкой useDispatch - React Native / Redux

0 голосов
/ 17 января 2020

Не удалось найти реакцию родной справки на проблему в предыдущих постах.

Я получаю это сообщение:

неверный вызов перехвата. Перехватчики могут вызываться только внутри тела компонента функции

Мой компонент является функциональным компонентом, и все перехваты (useState, useDispatch) вызываются внутри. Кто-нибудь получает это? 

      export default function  LoginScreen (props) {
      const [name, setName] = useState("");
      const [message, setMessage] = useState("");


      const nextScreen = () => {
        // const dispatch = useDispatch();
        // dispatch(SendMessage(name, message));
        props.navigation.navigate("Chat", { name: name });
        return null
      };

      return (
        <View>
          <TextInput
            style={styles.input}
            placeholder="name..."
            onChangeText={userInput => {
              console.log(userInput);
              setName({ userInput });
            }}
            value={name}
          />
          <TextInput
            style={styles.input}
            placeholder="message..."
            onChangeText={userInput => {
              console.log(userInput);
              setMessage({ userInput });
            }}
            value={message}
          />
          <View style={{ alignItems: "flex-end", marginTop: 64 }}>
            <TouchableOpacity style={styles.nextScreen} onPress={nextScreen}>
              <Ionicons name="md-arrow-round-forward" size={24} color="#FFF" />
            </TouchableOpacity>
          </View>
        </View>
      );
    };

1 Ответ

1 голос
/ 17 января 2020

Правила Крюков состояния:

Только Call Hooks на верхнем уровне

Не вызывать Hooks внутри циклов , условия или вложенные функции . Вместо этого всегда используйте Hooks на верхнем уровне вашей функции React. Следуя этому правилу, вы гарантируете, что хуки вызываются в одном и том же порядке каждый раз при рендеринге компонента. Это то, что позволяет React правильно сохранять состояние хуков между несколькими вызовами useState и useEffect. (Если вам интересно, мы объясним это подробно ниже.)

Вызовите хук в теле компонента LoginScreen, а dispatch внутри функции nextScreen : 

export default function LoginScreen(props) {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");

  const dispatch = useDispatch(); // call hook and get dispatch

  const nextScreen = () => {
    dispatch(SendMessage(name, message)); // use dispatch
    props.navigation.navigate("Chat", {
      name: name
    });
    return null
  };
...