时间戳

首页 > 解决方案 > 使用现有状态更新/重置状态 - ReactJs

javascript - 使用现有状态更新/重置状态 - ReactJs

问题描述

我在这里很头疼。我有一些复选框。选中复选框后，您可以根据选中的复选框下载文档。下载完成后，我禁用了我的复选框，但它仍然被标记为选中。UI 方面，我通知用户此部分已下载。但是，如果用户从同一页面中选择另一个复选框，则会再次启用前一个复选框（因此不再禁用）。我的问题是如何更新或重置我的状态以禁用所有复选框并仅下载当前选择的文档而不下载以前的文档。

   constructor(props) {
    super(props);
    this.state = { docList: {} }

之后这是我处理复选框的功能：

    handleCheckboxClick = (e) => {
let parsedVal = JSON.parse(e.target.value);
let newDocList = { ...this.state.docList };
if (e.target.checked) {
    newDocList[parsedVal.documentId] = parsedVal.documentNumber;
} else {
    delete newDocList[parsedVal.documentId];
}
this.setState({
    docList: newDocList,
}, () => {
    console.log(this.state.docList)
});

之后是我的axios.post方法：

    axios.post(SERVER_URL + '/api/user/bills/zip', postZipData, axiosZipConfig)

        .then((response) => {
            this.setState({
                downloadedIDS: response.data.downloadedIds,
                docList: this.state.docList
            })    e.preventDefault();

和渲染：

const { downloadedIDS, docList } = this.state;

render: rowData =>
              <Checkbox
              disabled={downloadedIDS && downloadedIDS.indexOf(rowData.documentId) >= 0 ? true : false}
              color='default'
              value={JSON.stringify({ documentId: rowData.documentId, documentNumber: rowData.documentNumber })}
              onClick={this.handleCheckboxClick} />

结果是这样的： 在此处输入图像描述

欢迎任何建议我应该如何对待我的代码。

标签： javascriptreactjsaxiosstate

解决方案

在这个部分...

.then((response) => {
            this.setState({
                downloadedIDS: response.data.downloadedIds,
                docList: this.state.docList
            })    e.preventDefault();

您似乎正在downloadedIds用刚刚返回的响应中的 ID 覆盖。如果我理解正确，您似乎应该将响应中的 ID 附加到downloadedIds.

假设downloadedIds这里是一个数组，您可以如何使用数组扩展运算符来实现这一点。

this.setState({
    downloadedIds: [
        ...this.state.downloadedIds,
        ...response.data.downloadedIds
    ]
})

将 docList state 设置为 equal 没有意义，this.state.docList只会将 state 设置为相同的东西，所以它不是必需的。

希望这会有所帮助，让我知道是否可以更详细地介绍。

推荐阅读