React: When I add a react component, The new component's props is preComponent's props

[Phlicess]

Do you want to request a feature or report a bug?
bug
What is the current behavior?
When I use props for subcomponent rendering, I put the values of the props(A.count and B.count) of the parent component (A and B) into the props of the subcomponents (a and b) (a.count and In b.count). But when I dynamically add an outer component (C), the initialized state inside the parent component (I initialize some state in the constructor) is the props of the B component, not the props of C I want, and When I add C at the end, it is the correct props, so I think the props of the newly added component C depend on the props of the last rendered component.
My English is not good, I don't know if you can understand it.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react: ^16.5.2
react-redux: ^5.0.7

[Phlicess]

[sophiebits]

It's hard for me to understand you exactly, but your problem sounds similar to other problems where people use React key={} incorrectly. Here is the link to the Chinese documentation for it: https://react.docschina.org/docs/lists-and-keys.html#keys.

I wonder if you are writing key={i} with the index of each element in your loop over the list. That can cause errors like this.

If this doesn't help you, could you post a full code example that I can run? It is very hard to help when I can only see screenshots.

[Phlicess]

It's hard for me to understand you exactly, but your problem sounds similar to other problems where people use React key={} incorrectly. Here is the link to the Chinese documentation for it: https://react.docschina.org/docs/lists-and-keys.html#keys.

I wonder if you are writing key={i} with the index of each element in your loop over the list. That can cause errors like this.

If this doesn't help you, could you post a full code example that I can run? It is very hard to help when I can only see screenshots.

OK👌, I will go deeper into it. Thanks Soooo much~~ =.=

[Phlicess]

It's hard for me to understand you exactly, but your problem sounds similar to other problems where people use React key={} incorrectly. Here is the link to the Chinese documentation for it: https://react.docschina.org/docs/lists-and-keys.html#keys.

I wonder if you are writing key={i} with the index of each element in your loop over the list. That can cause errors like this.

If this doesn't help you, could you post a full code example that I can run? It is very hard to help when I can only see screenshots.

I think I find the problem:

<div className="layerpanel-content" style={{ display: this.state.collaspeState[index] ? 'block' : 'none' }}>
      // generate components
      {layerParser(value)}
</div>

To

this.state.collaspeState[index] ?
        <div className="layerpanel-content">
                {layerParser(value)}
         </div> : ''

It's works ! (＾－＾)V

[sophiebits]

I still think you may have an error with your key={} in the list elements but I'm glad your code is working now.