获取后，反应用数据表行中的星号替换对象数组中的某些键值

Question

我有一个 datatable/datagrid，它通过具有不同值的对象数组打印数据列表。如何定位特定对象或在本例中为列并将其行值从 true/false 更改为星号 ***** 以对用户隐藏。

Array as shown in console with objects and values

Datatable with example values

const [userList, setUserList]=useState([]);
useEffect(()=> {
createAPIEndpoints(ENDPOINTS.USERLIST).fetchAll().then(res =>{
setUserList(res.data);
})
.catch(err => console.log(err))},[]);

return (
<div style={{ height: 600, width: '85%',marginLeft:"30vh"}}>
  <DataGrid
    rows={userList}
    columns={newuserList}
    pageSize={10}
    rowsPerPageOptions={[10]}
    checkboxSelection
  />
  <div>

这是我用来获取用户帐户列表并将其值存储在 material ui Datagrid 行中的代码。我想定位一个特定的键及其值，例如 'passwordIsChanged' 并将其值从 true/false 替换为星号 ****。有任何想法吗？如图所示。

Answer 1

这应该很容易。在设置 userList 之前更新它。

现在检查这条线data.forEach(user => user.passwordIsChanged = '*****')

以前有两个等号，现在只有一个。那是我的错误。它现在应该可以工作了。

const [userList, setUserList]=useState([]);
useEffect(()=> {
createAPIEndpoints(ENDPOINTS.USERLIST).fetchAll().then(res =>{
// here update the data
let data = res.data
data.forEach(user => user.passwordIsChanged = '*****') // something like this, check your data structure
console.log(data) // confirm/debug data 
setUserList(data);
})
.catch(err => console.log(err))},[]);

return (
<div style={{ height: 600, width: '85%',marginLeft:"30vh"}}>
  <DataGrid
    rows={userList}
    columns={newuserList}
    pageSize={10}
    rowsPerPageOptions={[10]}
    checkboxSelection
  />
  <div>

获取后，反应用数据表行中的星号替换对象数组中的某些键值

React replace certain key values from array of objects with asterisk in datatable row after fetching

arrays

datatable

reactjs

material-ui

fetch-api