javascript - React: Switch CaseSame Component doesn't Unmount - Stack Overflow

admin管理员组

文章数量:1420659

I'm implementing a multi-step process in React-native (similar to react).

I have a function that determines which step is displayed :

renderStep = step => {

  switch (processStep[step]) {
    case 0:
      return (
        <Product />
      );
      break;
    case 1:
      return (
        <Select data={size} />
      );
      break;
    case 2:
      return (
        <Select data={adresses} />
      );
      break;
    case 3:
      return (
        <RecapOrder />
      );
      break;
    default:
      return null;
  }
};

My 2nd et 3rd step are using the same _stepSelect ponent. It uses the same logic, so i'm using the same ponent.

My issue is : The Select ponent doesn't Unmount between the step 1 and 2 even if the props changes.

So my local State is not reset when changing from step 1 to step 2.

How can i force the Component to be Unmounted.

I'm implementing a multi-step process in React-native (similar to react).

I have a function that determines which step is displayed :

renderStep = step => {

  switch (processStep[step]) {
    case 0:
      return (
        <Product />
      );
      break;
    case 1:
      return (
        <Select data={size} />
      );
      break;
    case 2:
      return (
        <Select data={adresses} />
      );
      break;
    case 3:
      return (
        <RecapOrder />
      );
      break;
    default:
      return null;
  }
};

My 2nd et 3rd step are using the same _stepSelect ponent. It uses the same logic, so i'm using the same ponent.

My issue is : The Select ponent doesn't Unmount between the step 1 and 2 even if the props changes.

So my local State is not reset when changing from step 1 to step 2.

How can i force the Component to be Unmounted.

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Mar 8, 2018 at 15:35 Louis LecocqLouis Lecocq 1,81433 gold badges1818 silver badges4040 bronze badges 10

• 3 A hack I've used is adding a different key to the ponents. React uses keys to determine instances of a ponent. So if two ponents have different keys, it should see that as two separate instances. – Chase DeAnda Commented Mar 8, 2018 at 15:38
• Another (better) solution would be to use the ponentWillReceiveProps lifecycle method and handle when new data gets passed in the same way you would in ponentDidMount. – Chase DeAnda Commented Mar 8, 2018 at 15:39
• @DimitarChristoff Well no it doesn't. Otherwise i won't be making this issue :) – Louis Lecocq Commented Mar 8, 2018 at 15:42
• 2 @DominicTobias I've never seen anywhere that ponentWillReceiveProps is deprecated. ponentDidUpdate is triggered with any State Changes (props and state). ponentWillReceiveProps is triggered only when new props are provided @ChaseDeAnda feel free to provide a concrete answer so i can try it out – Louis Lecocq Commented Mar 8, 2018 at 15:44
• 1 github./facebook/react-native/issues/18175 It not going to be deprecated anytime soon. – Louis Lecocq Commented Mar 8, 2018 at 15:53

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 10

I would suggest first trying to add keys to each element being rendering in this function. I have seen issues where React cannot tell the difference between the ponents being rendered so it skips a few life cycle events and just skips straight to render.

<Product key="process-step-product"/>

本文标签： javascriptReact Switch CaseSame Component doesn39t UnmountStack Overflow