用现有的 ReactJs 更新/重置 state

Question

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

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

之后这是我的 function 来处理复选框：

    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} />

结果是这样的：

欢迎任何建议我应该如何处理我的代码。

Answer 1

在这个部分...

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

您似乎正在使用刚刚返回的响应中的 ID 覆盖downloadedIds的 ID。 如果我理解正确，您似乎应该 append 来自对现有downloadedIds的响应的 ID 。

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

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

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

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