javascript - React 状态正在发生变化，但之前的部分数据仍显示在表格顶部

Question

示例：如果有 2 个旧数据，而新数据只是 1 个表，显示 1 个旧数据和 1 个新数据。我在地图函数中放了一个日志，一切都按预期工作，但看不到真实

这是我的代码：

   <Table hover>
                <thead>
                    <tr>
                        <th>Personel</th>
                        <th>Verdiği Servis Hizmeti Sayısı</th>
                    </tr>
                </thead>

                <tbody>
                    { this.state.reportDetails.length > 0 ? this.state.reportDetails.map((reportDetail) => {
                        return (
                        <tr key={reportDetail.employeeId}>
                            <td>{reportDetail.employee}</td>
                            <td>{reportDetail.totalQuantityOfHandledService}</td>
                        </tr>
                    )
                    })
                    : <h3 className="text-center mt-5">Belirtilen kriterlere göre kayıt bulunamadı!</h3>}
                </tbody>
                
            </Table>

---

这部分代码在我更改选择框时运行

getReport(id) {
        let token = localStorage.getItem('token');

        let url = "/api/reports/GetReportForEmployee?employeeId=" + id;
        fetch(url, {
            method: 'get',
            headers: {
                'Authorization': `Bearer ${token}`
            }
        })
            .then(async (response) => {
                const result = await response.json();

                if (!response.ok) {
                    const error = result;
                    return Promise.reject(error);
                }
                
                await this.setState(() =>  {return {reportDetails: result.data}});
                

            })
            .catch((responseError) => {
                if (responseError.Message == "Token Bulunamadı!") {
                    this.CreateTokenByRefreshToken();
                }
            })
    }

标签： javascriptreactjs

Answer 1

调用setState不会返回Promise. 我建议您更改代码的某些部分：

 fetch(url, {
    method: 'get',
    headers: {
    'Authorization': `Bearer ${token}`
   }
 })
 .then(response => {
    if(response.ok) {
      return response.json();
    } else {
      throw new Error("request failed: ");
    }
  }) //--> call json() in a separate then block
 .then(result) => {
     this.setState({reportDetails: result.data});
  })
  .catch((responseError) => {
      if (responseError.Message == "Token Bulunamadı!") {
        this.CreateTokenByRefreshToken();
      }
  })