Javascript 如何在筛选时显示隐藏摘要值和显示筛选器摘要值

我正在尝试从筛选器摘要中获取数据，并且我能够获取数据，但是当我尝试隐藏摘要值时，筛选器值出现在筛选之后，它不起作用。仅摘要值显示筛选器摘要值未显示，因此，当筛选器摘要值出现在筛选器之后时，如何隐藏摘要值。下面是我的代码

User.js

import React, { Component } from "react";
import Summery from "./summery";
import FilterSummaey from "./FilterSummaey";
import DateForm from "../Electric/DateForm";
import Topbar1 from "../../Container/Layout/Topbar1";

import config from "../config";

export class user extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value,
      user: [],
      c: []
    };
  }
  async componentDidMount() {
    try {
      const res = await fetch(config.apiUrl.user);
      const user = await res.json();
      console.log(user);
      this.setState({
        user
      });
    } catch (e) {
      console.log(e);
    }
  }

  // Get Data from filter date
  getData = async e => {
    try {
      const from = e.target.elements.from.value;
      const to = e.target.elements.to.value;
      e.preventDefault();
      Promise.all([
        fetch(`${config.apiUrl.user}?date__lte=${to}&date__gte=${from}`)
          .then(user => user.json())
          .then(user => {
            // console.log(movies1);
            this.setState({
              user
            });
          }),
        fetch(`${config.apiUrl.dashboard}?date__lte=${to}&date__gte=${from}`)
          .then(c => c.json())
          .then(c => {
            console.log(c);
            this.setState({
              c
            });
          })
      ]);
    } catch (e) {
      console.log(e);
    }
  };

  render() {
    var data;
    if (this.state.c) {
      data = <Summery />;
    } else {
      data = <FilterSummaey movie={this.state.c} />;
    }
    return (
      <div className="container" style={{ marginTop: "20px" }}>
        <DateForm loaddata={this.getData} />
        <Topbar1 />

        {/* <h3 className="text-center" style={{marginTop:"10px"}}> User Details: &nbsp;<strong> POSTMAN NAME</strong> </h3> */}
        <div
          className="bg-white"
          style={{ padding: "15px", borderTop: "2px solid #CCEFDC" }}
        >
          <table class="table table-hover" style={{ marginTop: "20px" }}>
            <thead>
              <tr style={{ background: "#CCEFDC" }} className="thead1">
                <th scope="col" className="t">
                  Id
                </th>
                <th scope="col">
                  Dystans pieszo <br></br> (km)
                </th>
                <th scope="col" style={{ width: "110px" }}>
                  Przeniesiona masa <br></br>przesyłek (kg)
                </th>
                <th scope="col">
                  Dystans rowerem klasycznym <br></br> (km)
                </th>
                <th scope="col">
                  Przewieziona masa przesyłek RK <br></br> (kg)
                </th>
                <th scope="col">
                  Dystans rowerem elektrycznym <br></br> (km)
                </th>
                <th scope="col">
                  Przewieziona masa przesyłek RE<br></br> (kg)
                </th>
                <th scope="col">
                  Całkowity dystans<br></br> (km)
                </th>
                <th scope="col">
                  Całkowita masa przesyłek<br></br> (kg)
                </th>
              </tr>
            </thead>
            {this.state.user.map(c => (
              <tbody key={c.pk}>
                <tr>
                  <td>
                    <a
                      href={"uoverview/" + c.pk}
                      style={{ color: "#13B760" }}
                      class="font-weight-bold"
                    >
                      {c.user}
                    </a>
                  </td>
                  <td>{c.total_walk_milage ? `${c.total_walk_milage}` : 0}</td>
                  <td>{c.total_walk_kg ? `${c.total_walk_kg}` : 0} </td>
                  <td>
                    {c.total_classic_milage ? `${c.total_classic_milage}` : 0}{" "}
                  </td>
                  <td>{c.total_classic_kg ? `${c.total_classic_kg}` : 0} </td>
                  <td>
                    {c.total_electric_milage ? `${c.total_electric_milage}` : 0}{" "}
                  </td>
                  <td>{c.total_electric_kg ? `${c.total_electric_kg}` : 0}</td>
                  <td>{c.total_milage ? `${c.total_milage}` : 0} </td>
                  <td>{c.total_kg ? `${c.total_kg}` : 0} </td>
                </tr>
              </tbody>
            ))}
            {/* {!c && <Summery />}
            {this.state.c && <FilterSummaey movie={c} />} */}
            {data}
          </table>
        </div>
      </div>
    );
  }
}

export default user;

import React，{Component}来自“React”；
从“/Summy”导入Summy；
从“/FilterSummaey”导入FilterSummaey；
从“./Electric/DateForm”导入日期表单；
从“../../Container/Layout/Topbar1”导入Topbar1；
从“./config”导入配置；
导出类用户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
价值：道具价值，
用户：[]，
c:[]
};
}
异步组件didmount（）{
试一试{
const res=await fetch（config.apirl.user）；
const user=wait res.json（）；
console.log（用户）；
这是我的国家({
用户
});
}捕获（e）{
控制台日志（e）；
}
}
//从筛选日期获取数据
getData=async e=>{
试一试{
常量from=e.target.elements.from.value；
常数to=e.target.elements.to.value；
e、 预防默认值（）；
我保证([
获取（`${config.apirl.user}？日期\uu lte=${to}&日期\uu gte=${from}`）
.then（user=>user.json（））
。然后（用户=>{
//控制台日志（movies1）；
这是我的国家({
用户
});
}),
获取（`${config.apirl.dashboard}？日期\uu lte=${to}&日期\uu gte=${from}`）
.then（c=>c.json（））
.然后（c=>{
控制台日志（c）；
这是我的国家({
C
});
})
]);
}捕获（e）{
控制台日志（e）；
}
};
render（）{
var数据；
如果（此.state.c）{
数据=；
}否则{
数据=；
}
返回(
{/*用户详细信息：邮递员姓名*/}
身份证件
迪斯坦·皮埃索（公里）
普泽尼西亚纳马萨

普泽西亚克（千克）
德斯坦·罗维雷姆·克拉西兹尼姆

（公里）
Przewieziona masa przesyłek RK（千克）
迪斯坦·罗维雷姆·埃列克特利克兹尼姆

（公里）
Przewieziona masa przesyłek RE

（千克）
卡可维蒂迪斯坦（公里）
卡科维塔·马萨·普泽塞克（千克）
{this.state.user.map（c=>(
{c.total\u walk\u milage？`${c.total\u walk\u milage}`:0}
{c.total_walk_kg？`${c.total_walk_kg}：0}
{c.total_classic_milage？`${c.total_classic_milage}:0}{'}
{c.total_classic_kg？`${c.total_classic_kg}`:0}
{c.total\u electric\u milage？'${c.total\u electric\u milage}`:0}{'}
{c.total\u electric\u kg？`${c.total\u electric\u kg}`:0}
{c.total\u milage？`${c.total\u milage}`:0}
{c.total_kg？`${c.total_kg}`:0}
))}
{/*{！c&}
{this.state.c&&}*/}
{data}
);
}
}
导出默认用户；

您可以这样做

{ this.state.c && this.state.c.length > 0
  ? <FilterSummaey movie={c} />} 
  : <Summery />
}

{this.state.c&&this.state.c.length>0
? } 
: 
}

希望能有帮助