如何在 React Native 的不同组件中使用钩子并让它们显示相同的值？

Posted 2023-02-23

【中文标题】如何在 React Native 的不同组件中使用钩子并让它们显示相同的值？

【英文标题】：How can you use hooks in different components in React Native and have them show the same values?

【发布时间】：2021-10-19 15:57:10

【问题描述】：

我正在使用挂钩来设置和更改两个不同组件内的值。当我更新其中一个组件中的值时，它不会在另一个组件中更新，如果导航出组件然后返回，则重置该值。第一个组件的代码如下：

import React, useState from 'react';
import View, Text, StyleSheet, Button, TextInput from 'react-native';
import useWord from '../hooks/useWord';

const TextComponent = () => 
  const [changeWord, word, errorMessage] = useWord();
  const [text, onChangeText] = useState('');

  return (
    <View>
      <Text>Text Component</Text>
      <TextInput
        value=text
        autoCapitalize="none"
        autoCorrect=false
        onChangeText=onChangeText
      />
      <Button title='Add text' onPress=() => changeWord(text) />
      errorMessage ? <Text>errorMessage</Text> : null
      <Text>word</Text>
    </View>
  );
;

const styles = StyleSheet.create();

export default TextComponent;

第二个组件的代码是：

import React from 'react';
import View, Text, StyleSheet, Button from 'react-native';
import useWord from '../hooks/useWord';

const OverviewComponent = props => 
  const [changeWord, word, errorMessage] = useWord();

  return (
    <View>
      <Text>Overview Component</Text>

      <Button
        title='Go to text demo'
        onPress=() => props.navigation.navigate('Text')
      />
      errorMessage ? <Text>errorMessage</Text> : null
      <Text>word</Text>
    </View>
  );
;

const styles = StyleSheet.create();

export default OverviewComponent;

钩子的代码是：

import useEffect, useState from 'react';

export default () => 
  const [word, setWord] = useState(['B']);
  const [errorMessage, setErrorMessage] = useState('');

  const changeWord = async letter => 
    console.log('Hi there');
    try 
      setWord([...word, letter]);
     catch (err) 
      setErrorMessage('Something went wrong');
    
  ;

  useEffect(() => 
    changeWord('B');
  , []);

  return [changeWord, word, errorMessage];
;

如何更新其中一个组件内的值，然后导航到另一个组件并查看更新后的值？

【问题讨论】：

像组件这样的钩子不会在它们存在之外存储状态。每次你使用你的钩子时，它都是一个新实例。要让两个组件共享相同的状态，您必须提升状态（意味着您必须将它们的两个状态都保存在父组件中）或者您可以使用类似上下文的内容：reactjs.org/docs/context.html

尝试将useWord 放在这些组件的父对象中，并将值作为属性传递

最好使用上下文、redux、reducer 或将它们包装在处理共享值的组件中，我认为您所做的是为每个组件制作不同的 setWord 挂钩，以便每个组件中的值不同，每个setWord 指向不同的组件

【参考方案1】：

react hooks 的特点是它们不会在使用它们的组件存在之外存储状态或值。最好的解决方案是您提供父组件的状态并通过道具将其发送给子组件并在那里使用状态。每次使用 React 钩子时都会有一个新实例。