如何單獨更新從React中的同一組件獲得的按鈕圖示

我有一個查看全部頁面。該頁面有一個包含用戶資料的表格，其中包含可以執行的操作。該按鈕有兩個不同的圖示。微調器圖示和默認圖示。我想更改按鈕的圖示，直到任務執行。

例如：在 M_1 的禁用/洗掉程序起作用之前顯示微調器圖示并顯示鎖定/垃圾圖示。

我知道如何通過放置 useState 來更新一個按鈕圖示。當 1 行有 2 個按鈕時，表示 2 個使用狀態。所以 2 行意味著 4 個使用狀態。但這并不實用。我想知道如何以正確的方式做到這一點。

帶按鈕的表格：

查看所有頁面：

import React, { useEffect, useState } from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CRow,
  CSpinner,
  CTable,
  CTableBody,
  CTableDataCell,
  CTableHead,
  CTableHeaderCell,
  CTableRow,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilTrash, cilLockLocked } from '@coreui/icons'

const ViewAll = () => {
  const [usersData, setUsersData] = useState({})

  const [disabled, setDisabled] = useState(false)

  const handleLoadMembers = async () => {
    try {
      const _data = await fetch('http://localhost:4000/api/v1/member/list', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer '   localStorage.getItem('token'),
        },
      })

      if (_data.status !== 200) {
        throw new Error()
      }

      const data = await _data.json()
      setUsersData(data.members)
    } catch (err) {
      console.error(err)
    }
  }

  const handleDelete = async (id) => {
    alert('clicked')
    try {
      const _data = await fetch('http://localhost:4000/api/v1/member/remove/'   id, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer '   localStorage.getItem('token'),
        },
      })
      window.location.reload()

      console.log(_data)
    } catch (err) {
      console.error(err)
    }
  }

  useEffect(() => {
    handleLoadMembers()
  }, [])

  return (
    <CRow>
      <CCol xs={12}>
        <CCard className="mb-4">
          <CCardHeader>
            <strong>All Members</strong>
          </CCardHeader>

          {usersData.length > 0 ? (
            <CCardBody>
              <p className="text-medium-emphasis small">Here the all members of your community.</p>
              <CTable hover bordered>
                <CTableHead color="dark">
                  <CTableRow>
                    <CTableHeaderCell scope="col">Member ID</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Name</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Email</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Actions</CTableHeaderCell>
                  </CTableRow>
                </CTableHead>
                <CTableBody>
                  {usersData.map((item, index) => {
                    return (
                      <CTableRow key={index}>
                        <CTableHeaderCell scope="row">M_{item.index}</CTableHeaderCell>
                        <CTableDataCell>{item.name}</CTableDataCell>
                        <CTableDataCell>{item.email}</CTableDataCell>
                        <CTableDataCell class="d-flex justify-content-evenly">
                          <CButton
                            color="danger"
                            size="sm"
                            disabled={disabled}
                            onClick={() => handleDelete(item._id)}
                          >
                            {disabled ? (
                              <CSpinner
                                component="span"
                                className="me-2"
                                size="sm"
                                aria-hidden="true"
                              />
                            ) : (
                              <CIcon icon={cilTrash} className="me-2" />
                            )}
                            Delete
                          </CButton>
                          <CButton
                            color="warning"
                            size="sm"
                            disabled={disabled}
                            onClick={() => handleDelete(item._id)}
                          >
                            {disabled ? (
                              <CSpinner
                                component="span"
                                className="me-2"
                                size="sm"
                                aria-hidden="true"
                              />
                            ) : (
                              <CIcon icon={cilLockLocked} className="me-2" />
                            )}
                            Disable
                          </CButton>
                        </CTableDataCell>
                      </CTableRow>
                    )
                  })}
                </CTableBody>
              </CTable>
            </CCardBody>
          ) : (
            'No data'
          )}
        </CCard>
      </CCol>
    </CRow>
  )
}

export default ViewAll

uj5u.com熱心網友回復：

一個更好的想法是使用 react 和 redux 進行狀態管理。

解決問題的步驟：

1. 制作 3 種操作型別（請求、成功、失敗）。
2. 將 API 呼叫集成到操作/sagas 檔案中。
3. 每當您從表中洗掉特定資料時，請求操作將分派到存盤，您可以在請求縮減器型別中將特定資料/專案 id 和加載標志設定為 true。
4. 一旦操作在那個時候發送成功，請確保在成功減速器型別中將加載設定為 false，在失敗時也類似。
5. 獲取道具中的 id 和加載值并顯示您想要顯示的任何操作（洗掉/禁用微調器）。

希望你能理解步驟。一切順利！！！！

uj5u.com熱心網友回復：

如何將 CButton 制作成組件并交出道具 false，true

標籤：

上一篇：禁用ReactJS中的按鈕

下一篇：擁有一個什么都不做的JavaScript函式是否有效？