javascript - Route not updating state from navigation params - Stack Overflow

admin管理员组

文章数量:1312986

So I have this screen that show product details, it works like a template because only the data ing navigation params changes, I am having the issue because there's no reload, it works fine when going back and mounting it again, that's not the case here since I have related products showing on that same screen, I'll need a way to be able to either reload the current route or update the state

I have checked with console.log nothing shows up on second click

constructor (props) {
  super(props)
  this.state = {
    product: this.props.route.params.product,
    id: this.props.route.params.product.id,
  }
}

To navigate to use to the route I use on both the screen itself or in another route

viewProduct = (product) => {
  this.props.navigation.navigate('SingleProduct', { product: product })
}

I have tried setState inside of both ponentDidMount and UNSAFE_ponentWillReceiveProps but the results only shows after an additional click

So I have this screen that show product details, it works like a template because only the data ing navigation params changes, I am having the issue because there's no reload, it works fine when going back and mounting it again, that's not the case here since I have related products showing on that same screen, I'll need a way to be able to either reload the current route or update the state

I have checked with console.log nothing shows up on second click

constructor (props) {
  super(props)
  this.state = {
    product: this.props.route.params.product,
    id: this.props.route.params.product.id,
  }
}

To navigate to use to the route I use on both the screen itself or in another route

viewProduct = (product) => {
  this.props.navigation.navigate('SingleProduct', { product: product })
}

I have tried setState inside of both ponentDidMount and UNSAFE_ponentWillReceiveProps but the results only shows after an additional click

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Jun 23, 2020 at 6:52 pawello2222 54.7k2323 gold badges180180 silver badges238238 bronze badges asked Jun 22, 2020 at 22:42 YoussefYoussef 64511 gold badge88 silver badges2222 bronze badges 3

• Can you please let me know version of react-navigation and react-native ? – rashi jain Commented Jun 22, 2020 at 23:01
• Does this answer your question? Refresh previous screen on goBack() – Irfan wani Commented Jan 24, 2021 at 10:43
• Here is the link of answer: stackoverflow./a/65869570/13789135 – Irfan wani Commented Jan 24, 2021 at 10:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can use the following function to navigate from singleProduction screen to the same screen with the different params.

this.props.navigation.replace('SingleProduct', { product: product })

navigation.setParams({
   query: 'someText',
});

Taken from react navigation docs

use the route.params?.product directly and mention change in useEffect array.

  useEffect(() => {

    return () => {
      // Clean up the subscription
      
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [route.params?.product]);

本文标签： javascriptRoute not updating state from navigation paramsStack Overflow