Reactjs 通过条件呈现新内容时删除以前的内容（React）

我有一个导航栏，它使用事件键在按钮之间切换

const CustomNav = ({ active, onSelect, ...props }) => {
  return (
    <Nav
      {...props}
      activeKey={active}
      onSelect={onSelect}
      style={{ marginBottom: "15px" }}>
      <Nav.Item eventKey='all'>All</Nav.Item>
      <Nav.Item eventKey='movies'>Movies</Nav.Item>
      <Nav.Item eventKey='shows'>Shows</Nav.Item>
      <Nav.Item eventKey='people'>People</Nav.Item>
    </Nav>
  );
};

constcustomnav=（{active，onSelect，…props}）=>{
返回(
全部的
影视
显示
人
);
};

我这样做：

const Content = () => {
  if (this.state.active === "all") {
    return (
      <div>
        {trending.results &&
          trending.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  } else if (this.state.active === "movies") {
    return (
      <div>
        {trendingMovies.results &&
          trendingMovies.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  }
};

const Content=（）=>{
如果（this.state.active==“全部”）{
返回(
{趋势分析结果&&
趋势分析结果图（（i）=>(
{i.title}

))}
);
}else if（this.state.active==“movies”）{
返回(
{trendingMovies.results&&
trendingMovies.results.map（（i）=>(
{i.title}

))}
);
}
};

这里叫它：

    return (
      <div className='Home'>
        <FlexboxGrid justify='center'>
          <Panel bordered header='Trending today!'>
            <CustomNav
              className='customNav'
              appearance='subtle'
              active={active}
              onSelect={this.handleType}
            />
            <Content />
            <Pagination
              {...this.state}
              style={{ marginTop: "15px" }}
              maxButtons={5}
              size='sm'
              pages={totalPages}
              activePage={this.state.activePage}
              onSelect={this.handlePage}
            />
          </Panel>
        </FlexboxGrid>
      </div>
    );
  }
}

返回(
);
}
}

---

显示每个选项卡的正确数据，但当我在“电影”选项卡上时，它会显示第一个“所有”选项卡中的所有数据+在“电影”选项卡上的数据。我想分别显示与“this.state.active”控制的正确选项卡相对应的每个数据。也尝试了switch语句，但无效

您使用的是箭头语法

const Content = () => { ... }

并在代码中使用

this.state

变量

如果要使用

this.state

，则需要使用类语法，如

class Content extends React.Component { ... }

但不要把这两种风格混在一起

您可能想做的是将

活动

变量作为道具发送

<Content active={active} />

尝试：

在调用组件时，将活动值作为道具发送进来

<Content active={active} />

然后你把这个组件叫做什么

<Content 
    myTrending={active === 'all' ? trending : trendingMovies}
/>

---

您正在使用箭头语法

const Content = () => { ... }

并在代码中使用

this.state

变量

如果要使用

this.state

，则需要使用类语法，如

class Content extends React.Component { ... }

但不要把这两种风格混在一起

您可能想做的是将

活动

变量作为道具发送

<Content active={active} />

尝试：

在调用组件时，将活动值作为道具发送进来

<Content active={active} />

然后你把这个组件叫做什么

<Content 
    myTrending={active === 'all' ? trending : trendingMovies}
/>

---

您需要将

活动的

和其他变量作为道具传递给内容组件，因为它不会访问它们：

const Content = ({active, trending=[], trendingMovies=[]}) => {
  if (active === "all") {
    return (
      <div>
        {trending.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  } else if (active === "movies") {
    return (
      <div>
        {trendingMovies.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  }
};

const Content=（{active，trending=[]，trendingMovies=[]）=>{
如果（活动==“全部”）{
返回(
{trending.results.map（（i）=>(
{i.title}

))}
);
}else if（活动==“电影”）{
返回(
{trendingMovies.results.map（（i）=>(
{i.title}

))}
);
}
};

返回(
);
}
}

您需要将

活动的

和其他变量作为道具传递给内容组件，因为它不会访问它们：

const Content = ({active, trending=[], trendingMovies=[]}) => {
  if (active === "all") {
    return (
      <div>
        {trending.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  } else if (active === "movies") {
    return (
      <div>
        {trendingMovies.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  }
};

const Content=（{active，trending=[]，trendingMovies=[]）=>{
如果（活动==“全部”）{
返回(
{trending.results.map（（i）=>(
{i.title}

))}
);
}else if（活动==“电影”）{
返回(
{trendingMovies.results.map（（i）=>(
{i.title}

))}
);
}
};

返回(
);
}
}

能否添加一些代码来显示如何调用Content方法？您可以向我们展示一些实际输出和预期输出。控制台并检查状态

this.state.active

value@sabbir.alam我把它称为一个组件（在React中通常会这样做）。@UKS this.state.active正在改变，但是，当我从“全部”切换到“电影”时，实际呈现内容时，它会显示“全部”+“电影”数据。您可以添加一些代码来显示如何调用content方法吗？您可以向我们展示一些实际输出和预期输出。控制台并检查状态

this.state.active

value@sabbir.alam我把它称为一个组件（在React中通常会这样做）。@UKS this.state.active正在改变，但当我从“全部”切换到“电影”时，实际呈现内容时会显示“全部”+“电影”数据首先，我已经在使用基于类的组件。如果我不是，我将如何使用状态？我已经有一个导航栏，它使用活动关键字作为键事件，并在选项卡之间切换。我正在尝试将每个数据显示到每个示例的正确选项卡上。如果我在“所有”选项卡中，它应该显示所有内容的数据。在我的例子中，它显示“所有”选项卡上的数据，但也显示“电影”选项卡上的相同数据+实际正确的电影数据。我正在尝试为每个选项卡显示匹配的内容如果您没有提供足够的代码来查看您正在尝试执行的操作，如果您想使用带有箭头语法的状态，则需要使用

useState

钩子，因为

this

关键字不会引用组件首先，我已经在使用基于类的组件。如果我不是，我将如何使用状态？我已经有一个导航栏，它使用活动关键字作为键事件，并在选项卡之间切换。我正在尝试将每个数据显示到每个示例的正确选项卡上。如果我在“所有”选项卡中，它应该显示所有内容的数据。在我的例子中，它显示“所有”选项卡上的数据，但也显示“电影”选项卡上的相同数据+实际正确的电影数据。我试图为每个选项卡显示匹配的内容如果您没有提供足够的代码来查看您试图执行的操作，如果您想使用带有箭头语法的状态，则需要使用

useState

hook，如

this

keywor