第一次点击反应后表格不呈现

Question

当我点击导航按钮时，表格数据会加载，但第二次点击表格数据不会加载，但每次点击 react js 时都会加载数据

我已将代码放入componentdidMount() {} 以在每次加载时加载它。我做了一个异步函数来加载表并设置标题。

{this.state.numofbugs.map((data)=> {
    return (
        <li key={data}>
            <Link to={'/applogs/' + data}
                     className="waves-effect" className={this.props.location.pathname === '/applogs/' + data ? 'active': ''}>
                <span className="font-size waves-effect" >{data}</span>
            </Link>
        </li>
    )
})} 

在它呈现的文件中

componentDidMount() {
    if (this.props.location.pathname.includes('app_')) {
        this.showTable(this.props.location.pathname.split('/')[2]);
    }
}

async showTable(col_name) {
    // empty data
    this.state.logtable = []
    let conf = { headers: { Authorization: 'Bearer ' + localStorage.getItem('session') }}
    Axios.get(links.baseURL + 'sample?collection=' + col_name, conf).then((response) => {
        // get headers
        this.state.tableHeaders = [
            Object.keys(response.data.result[0])[0], 
            Object.keys(response.data.result[0])[1],
            Object.keys(response.data.result[0])[2],
            Object.keys(response.data.result[0])[3],
        ]

        Object.keys(response.data.result).map((key) => {
            this.state.logtable[key] = response.data.result[key];
            this.state.logtable[key]['key'] = key.toString()
        }); 
        this.setState({'logtable': this.state.logtable});
    });
}

我希望在表格中的每个按钮单击时都会在表格中获取数据，但是在单击表格中折叠数据 laods 的选项卡后，第二次将数据加载到标记而不是表格中

Answer 1

首先，你不需要清空你的状态，

this.state.logtable = []

如果你想用新的状态替换你现有的状态，你可以简单地用新的数据设置状态。

另一个问题是，你正在直接改变你的状态，就像这样

this.state.tableHeaders = [
    Object.keys(response.data.result[0])[0], 
    Object.keys(response.data.result[0])[1],
    Object.keys(response.data.result[0])[2],
    Object.keys(response.data.result[0])[3],
]

还有这个

Object.keys(response.data.result).map((key) => {
    this.state.logtable[key] = response.data.result[key];
    this.state.logtable[key]['key'] = key.toString()
}); 

您应该使用局部变量来创建临时数组，然后需要将它们设置为您的状态，例如，

async showTable(col_name) {

    let conf = { headers: { Authorization: 'Bearer ' + localStorage.getItem('session') }}
    Axios.get(links.baseURL + 'sample?collection=' + col_name, conf).then((response) => {
        // get headers
        let tableHeaders = Object.keys(response.data.result[0]).map((key,index) => index <=3 && key.toString())

        let logtable = Object.keys(response.data.result).map((key) => ({
            logtable[key] : response.data.result[key];
            logtable[key]['key'] : key.toString()
        })); 
        this.setState({logtable, tableHeaders});
    });
}