Передача функции в качестве параметра с использованием Redux с хуками - PullRequest
Новая
       19

Передача функции в качестве параметра с использованием Redux с хуками

0 голосов
/ 09 июля 2020

ПРИМЕЧАНИЕ : Я использую React Navigation 5.x

Я пытаюсь перейти с родительского экрана на дочерний. Затем я вводил детали на дочернем экране. Когда я отправляю сведения, я хотел бы использовать их для обновления состояния моего родительского экрана

Я ранее пытался JSON.stringfy(), а затем JSON.parse() подробности, но это не помогло мне обновить состояние

Ранее я следовал этому руководству, но они используют React Navigation 4.x

ParentScreen: 

export default function Home({navigation}) {
    
  const auctions = useSelector(state => state)
  const dispatch = useDispatch()

  const addAuction = auction => dispatch(addauction(auction))
  const deleteAuction = id => dispatch(deleteauction(id))

  useEffect(() => {

    addAuction
  })

  
  return (
    <>
    <View style={styles.container}>
      {auctions.length === 0 ? (
        
          <Text >You do not have any auctions</Text>
        
      ) : (
        <FlatList
          data={data}
          renderItem={({ item }) => (
            <List.Item
              title={item.auction.auctionTitle}
              description={item.auction.auctionValue}
              descriptionNumberOfLines={1}
              onPress={() => deleteAuction(item.id)} //Check
            />
          )}
          keyExtractor={item => item.id.toString()}
        />
      )}
      <FAB
        style={styles.fab}
        small
        icon='plus'
        label='Add new auction'
        onPress={() =>
          navigation.navigate('Auctions', {
            auction: auctions
          })
        }
      />
    </View>
  </>
  );
}

ChildScreen: 

export default function Auctions({route, navigation}) {
    
  const [auctionTitle, setAuctionTitle] = useState('')
  const [auctionValue, setAuctionValue] = useState('')


  function onSaveAuction() {
    

    navigation.navigate('Auction Details', {
      auctionTitle: auctionTitle,
      auctionValue: auctionValue
    })

  }
  
  return (
    <>
      <View style={styles.container}>
        <IconButton
          icon='close'
          size={25}
          color='white'
          onPress={() => navigation.goBack()}
        />
        <TextInput
          label='Add Title Here'
          value={auctionTitle}
          mode='outlined'
          onChangeText={setAuctionTitle}
        />
        <TextInput
          label='Add Note Here'
          value={auctionValue}
          onChangeText={setAuctionValue}
          mode='flat'
          multiline={true}
          scrollEnabled={true}
          returnKeyType='done'
          blurOnSubmit={true}
        />
        <FAB
          style={styles.fab}
          small
          icon='check'
          disabled={auctionTitle == '' ? true : false}
          onPress={() => onSaveAuction()}
        />
      </View>
    </>
    );
}

1 Ответ

0 голосов
/ 09 июля 2020

Можете придерживаться этого руководства, в основном оно на Redux. Который вы все еще используете в своем текущем коде.

Данные «аукционов» хранятся в состоянии Redux, что является правильным, так как FlatLists лучше всего подходят для этого. Таким образом, параметры реакции-навигации ничего не изменят.

Ваша цель будет заключаться в отправке действия, которое либо обновляет, либо добавляет новый аукцион в ваш обработчик onSaveAuction. Redux автоматически обновит ваш родительский экран при отправке вашего действия. Затем используйте реакцию-навигацию, чтобы вернуться к родительскому экрану.

Я бы начал с примера со списком дел и лучше понял, как Redux хранит данные. Redux будет хранить все ваши данные по большей части, а response-navigation будет отслеживать, где вы находитесь. Как правило, вы обновляете Redux, а затем выполняете навигацию.

Вот один из документов Redux, но их много. Довольно близко к тому, что вы делаете сейчас. https://redux.js.org/basics/example/

...