Reactjs React同一组件的多个实例获得相同的状态

我有一个React组件，我正在创建它的两个副本。但是，当其中一个的状态更新时，它也会更新第二个。我不确定这是什么原因造成的

这是我的密码：

这是我使用2个组件的地方：

{this.state.selectedTab === 0 ?
    <Carousel
       size={1}
       cultureInfo={this.state.cultureInfo}
       collaboratorError={this.state.activeCollaborationError}
       getPinnedError={this.state.getPinnedUsersError}
       pinActionError={this.state.isPinnedServerError}
       user={this.state.activeCollaboratorContactsData}
       isPinnedTab={false}
       startDate={this.state.startDate}
       isMapped={this.state.isMapped}
       resetPosition={this.state.resetCollabCarousel}
       isVisible={this.state.selectedTab === 0 }
/>
:
<Carousel
  size={1}
  cultureInfo={this.state.cultureInfo}
  collaboratorError={this.state.activeCollaborationError}
  getPinnedError={this.state.getPinnedUsersError}
  pinActionError={this.state.isPinnedServerError}
  user={this.state.pinnedUsers}
  isPinnedTab={true}
  startDate={this.state.startDate}
  isMapped={this.state.isMapped}
  resetPosition={this.state.resetPinnedCarousel}
  isVisible={this.state.selectedTab === 1}
/>
}

{this.state.selectedTab==0？
:
}

这是传送带代码：

interface ICarouselProps {
 size: number;
 cultureInfo: CultureInfo;
 collaboratorError: Error.DataLayerError;
 getPinnedError: Error.DataLayerError;
 pinActionError: Error.DataLayerError;
 user: ActiveCollaboratorContact[];
 isPinnedTab: boolean;
 startDate: Date;
 isMapped: boolean;
 resetPosition: boolean;
 isVisible: boolean;
}

interface ICarouselState {
 position: number;
 width: number;
 isActiveNext: boolean;
 isActivePrev: boolean;
 isActive: number;
 }

 const numSlides = 2;
 const width = 100;
 const move = width / numSlides;
 const max = width - move;
 const min = -max;

 const numOfCards = 4;

 export default class Carousel extends BaseComponent<ICarouselProps,     

      ICarouselState> {
constructor() {
    super();
    this.resetState();
}

componentWillReceiveProps(newProps: ICarouselProps): void {
    if (newProps && newProps.resetPosition) {
        this.resetState();
    }
}

doRender(): React.ReactElement<{}> {
    let wrapperWidth: number;
    let widthStyle: string;
    wrapperWidth = (this.state as ICarouselState).width;

    const style:  React.CSSProperties = {
        WebkitTransform: "translateX(" + this.state.position + "%)",
        transform: "translateX(" + this.state.position + "%)",
        MozTransform: "translateX(" + this.state.position + "%)",
        msTransform: "translateX(" + this.state.position + "%)",
        OTransform: "translateX(" + this.state.position + "%)",
        width: wrapperWidth + "%"
    } as React.CSSProperties;
    const slideWidth:  React.CSSProperties = {width: move + "%"} as React.CSSProperties;
    let nextIsDisabled: boolean;
    let prevIsDisabled: boolean;
    let slideActive: string;

    widthStyle = (this.props.size === 0) ? styles.vCard : styles.hCard;
    nextIsDisabled = !this.state.isActiveNext;
    prevIsDisabled = !this.state.isActivePrev;
    slideActive = "slideActive" + this.state.isActive;

        const totalUsers = this.props.user.length;
        const articles: JSX.Element[] = [];


        for (let i = 0; i < 2; i++) {
            const cards: JSX.Element[] = [];
            for (let j = 0; j < numOfCards; j++) {
                const userIndex = i * numOfCards + j;
                if (userIndex < totalUsers) {
                    const card: JSX.Element = <Card
                        cultureInfo={this.props.cultureInfo}
                        user={this.props.user[userIndex]}
                        startDate={this.props.startDate}
                        extraMargin={userIndex % numOfCards === 0}
                    />;
                    cards.push(card);
                }
            }
            const article: JSX.Element =
                    <article className={styles.slideSingle}
                            tabIndex={0}
                            style={slideWidth}>
                        {cards}
                    </article>;
            articles.push(article);
        }
        return this.props.isVisible ?
                <div>
                    <div className={widthStyle + " " + styles.carousel + " " + slideActive} tabIndex={-1} id="Carousel">
                        <div className={styles.slideWrapper}
                            style={style}>
                            {articles}
                        </div>
                        <nav className={styles.nav}>
                            <ul className={styles.arrows}>
                                <li className={styles.stepLeft}>
                                <a disabled={prevIsDisabled} aria-disabled={prevIsDisabled} className={styles.previous} href="#"
                                    tabIndex={0}
                                    onClick = {this.prevSlideClicked}>
                                    BUTTONPREVTEXT
                                </a>
                                </li>
                                <li className={styles.stepRight}>
                                <a disabled={nextIsDisabled} aria-disabled={nextIsDisabled} className={styles.next} href="#"
                                    tabIndex={0}
                                    onClick = {this.nextSlideClicked}>BUTTONNEXTTEXT
                                </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
               </div> :
               null;

};

private resetState(): void {
    const newState: ICarouselState = {
            position: 0,
            width: numSlides * 100,
            isActiveNext: true,
            isActivePrev: false,
            isActive: 0
        };

    if (this.state) {
        this.setState(newState);
    } else {
        this.state = newState;
    }
}

private nextSlideClicked: () => void = () => {
    if (this.state.position > min + move) {
        this.setState({
            position: this.state.position - move,
            width: numSlides * 100,
            isActiveNext: true,
            isActivePrev: true,
            isActive: Math.abs((this.state.position - move) / move)
        });
    } else if ((this.state as ICarouselState).position > min) {
        this.setState({
            position: this.state.position - move,
            width: numSlides * 100,
            isActiveNext: false,
            isActivePrev: true,
            isActive: Math.abs((this.state.position - move) / move)
        });
    }
};

private prevSlideClicked: () => void = () => {
    if (this.state.position < 0 - move) {
        this.setState({
            position: this.state.position + move,
            width: numSlides * 100,
            isActiveNext: true,
            isActivePrev: true,
            isActive: Math.abs((this.state.position + move) / move)
        });
    } else if (this.state.position < 0) {
        this.setState({
            position: this.state.position + move,
            width: numSlides * 100,
            isActiveNext: true,
            isActivePrev: false,
            isActive: Math.abs((this.state.position + move) / move)
        });
    }
};

private getCarouselName(): CarouselNames {
    return "name"
}

接口ICarouselProps{
大小：数量；
cultureInfo:cultureInfo；
collaboratorError:Error.DataLayerError；
GetPinneError:Error.DataLayerError；
pinActionError:Error.DataLayerError；
用户：ActiveCollaboratorContact[]；
isPinnedTab：布尔型；
起始日期：日期；
isMapped：布尔型；
重置位置：布尔值；
isVisible：布尔；
}
接口ICarouselState{
职位：编号；
宽度：数字；
isActiveNext：布尔型；
isActivePrev：布尔型；
isActive：数字；
}
常数numSlides=2；
常数宽度=100；
常量移动=宽度/numSlides；
const max=宽度-移动；
常数最小值=-最大值；
常数numocards=4；
导出默认类Carousel扩展BaseComponent{
构造函数（）{
超级（）；
这个.resetState（）；
}
组件将接收道具（新道具：ICarouselProps）：无效{
if（newProps&&newProps.resetPosition）{
这个.resetState（）；
}
}
doRender（）：React.ReactElement{
让包装宽度：数字；
字体：字符串；
wrapperWidth=（this.state为ICarouselState）.width；
常量样式：React.cssprroperties={
WebKittTransform:“translateX（“+this.state.position+”%）”，
转换：“translateX（“+this.state.position+”）”，
MozTransform:“translateX（“+this.state.position+”%）”，
msTransform:“translateX（“+this.state.position+”）”，
OTransform:“translateX（“+this.state.position+”）”，
宽度：包装宽度+“%”
}as React.csp属性；
const slideWidth:React.CSSProperties={width:move+“%”作为React.CSSProperties；
设为禁用：布尔值；
设前置禁用：布尔型；
让slideActive:字符串；
widthStyle=（this.props.size==0）？styles.vCard:styles.hCard；
nextIsDisabled=！this.state.isActiveNext；
prevIsDisabled=！this.state.isActivePrev；
slideActive=“slideActive”+this.state.isActive；
const totalUsers=this.props.user.length；
常量项目：JSX.Element[]=[]；
for（设i=0；i<2；i++）{
常量卡：JSX.Element[]=[]；
for（设j=0；j



:
无效的
};
private resetState（）：void{
常量新闻状态：ICarouselState={
位置：0，
宽度：numSlides*100，
是的，
伊萨维普雷夫：错，
i活动：0
};
如果（本州）{
this.setState（newState）；
}否则{
this.state=newState；
}
}
private nextSlideClicked:（）=>void=（）=>{
如果（this.state.position>min+move）{
这是我的国家({
位置：this.state.position-移动，
宽度：numSlides*100，
是的，
伊萨维普雷夫：没错，
isActive:Math.abs（（this.state.position-move）/move）
});
}else if（（此.state为ICarouselState）.position>min）{
这是我的国家({
位置：this.state.position-移动，
宽度：numSlides*100，
isActiveNext:false，
伊萨维普雷夫：没错，
isActive:Math.abs（（this.state.position-move）/move）
});
}
};
private PrevlideClicked:（）=>void=（）=>{
如果（此.state.position<0-移动）{
这是我的国家({
位置：this.state.position+move，
宽度：numSlides*100，
是的，
伊萨维普雷夫：没错，
isActive:Math.abs（（this.state.position+move）/move）
});
}否则如果（this.state.position<0）{
这是我的国家({
位置：this.state.position+move，
宽度：numSlides*100，
是的，
伊萨维普雷夫：错，
isActive:Math.abs（（this.state.position+move）/move）
});
}
};
私有getCarouseName（）：carouseName{
返回“名称”
}

})

---

谢谢。

我也遇到了同样的问题。我在每个实例上设置了一个不同的“key”属性，问题就解决了。

请发布

旋转木马组件的代码好吗？为什么要使用
this.state=newState；
？这可能会导致奇怪的行为…：不要直接改变这个.state，就像调用setState（）一样之后可能会替换您所做的变异。将this.state视为不可变。（）我设置this.state是因为此调用来自构造函数，其中this.state未初始化。这两个转盘不能同时存在（因此
isVisible
是冗余的），你怎么能说他们“处于相同的状态”？如果可能的话，剥离你的组件我知道他们得到的是相同的状态集，因为当我单击其中一个上的“下一步”按钮时，第二个的位置也被设置为该值。也就是说，当第二个的可见性条件变为真时，它将显示与另一个相同的位置，而不是新的位置。谢谢你知道这就是问题所在！我知道当我们使用map（）渲染多个元素时的关键，就像它在控制台中抱怨的那样