Совместное использование состояния от ребенка к родителю путем маршрутизации реквизита - PullRequest
Новая
       6

Совместное использование состояния от ребенка к родителю путем маршрутизации реквизита

0 голосов
/ 07 апреля 2020

Я новичок в мире React, и я хотел бы знать, как я могу разделить состояние между двумя компонентами.

Я нашел решение, но не знаю, правильное ли оно.

Решение состоит в том, чтобы маршрутизировать состояние компонента в качестве реквизита от родителя к потомку и использовать этот реквизит для установки состояния дочернего компонента. От дочернего к родительскому объекту маршрутизация обновленного состояния в качестве подпорки и использование useEffect для установки нового состояния.

Я пишу простой код, чтобы лучше объяснить мою проблему.

Код работает, но я не уверен, что это правильный путь.

У меня есть два экрана Home и DeleteItem.

Цель экрана Home - визуализировать массив элементов, который является состоянием компонента Home. Нажав кнопку, я передаю состояние на экран DeleteItem.

DeleteScreen должен использовать то же состояние, что и HomeScreen. Поэтому я извлекаю маршрутизируемый реквизит и устанавливаю состояние DeleteScreen.

Таким образом, я могу удалить элементы массива с помощью простой функции и go вернуться на HomeScreen и отправить состояние обновления, нажав кнопку DONE.

Главный экран обрабатывает обновление с помощью useEffect.

Поэтому я хотел бы знать, если это правильный способ и если это самый короткий путь.

import * как реагировать от «реагировать»; import {Text, TextInput, View, Button, TouchableWithoutFeedback} из'act-native '; импортировать {NavigationContainer} из '@ response-navigation / native'; import {createStackNavigator} из 'реагирующей навигации / стека'; 

function HomeScreen({ navigation, route }) {
 const [list, setList] = React.useState(["itm1","itm2","itm3","itm4"])

  React.useEffect(() => {
    if (route.params?.post) {
      setList(route.params?.post)
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Delete item" onPress={() => 
      navigation.navigate('DeleteItem',{ prm: list })}/>
      {list.map((item, index) => (
        <Text style={{ margin: 10 }}>{item}</Text>))}
    </View>
  );
}

function DeleteItem({ navigation, route }) {

  const {prm}=route.params;
  const [list, setList] = React.useState(prm);

  function removeItem(index)  {
    const newArray = [...list];
    newArray.splice(index, 1);
    setList(newArray);
  }

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Done" onPress={() => {
      navigation.navigate('Home', { post: list });}}/>
      {list.map((item, index) => (
        <TouchableWithoutFeedback onClick={() => removeItem(index)}> 
              <Text style={{ margin: 10 }}>{item}</Text>
        </TouchableWithoutFeedback>))}
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="DeleteItem" component={DeleteItem} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

Я застрял в этом выпуске также на несколько часов. в реакции навигации v4 вы можете использовать экранные реквизиты, но в реакции навигации v5 использовать контекст для совместного использования состояния между компонентами, как указано в документах реагирования навигации:

Из-за API на основе компонентов React Navigation 5.x, у нас есть намного лучшая альтернатива screenProps, у которого нет этих недостатков: React Context. Используя React Context, можно передавать данные любому дочернему компоненту производительным и безопасным для типов способом, и нам не нужно изучать новый API!

Для начала с React context вы можете следуйте этому простому учебнику и это ссылка для официальных документов

0 голосов
/ 07 апреля 2020

Вы можете попробовать React Context для передачи данных через дерево компонентов вместо передачи данных через параметры с помощью реагирующего навигатора. Поскольку вы используете React Hooks, вы можете проверить React useContext hook.

...