При вызове компонента в таблице Material-UI два раза отображаются значки, кнопки или ссылки. - PullRequest
0 голосов
/ 25 марта 2020

Я не знал, какое название я должен отображать для этой проблемы.

У меня есть компонент с именем userRow, который я хочу вызвать для другого компонента с именем users, чтобы отобразить данные на материале. Таблица пользовательского интерфейса:

userRow:

export default function UserRow( props, {name, details}) {

    const style = styles();

    return (
     <Fragment>
         <ListItem>
           <ListItemIcon >
               <PeopleIcon className={style.color}/>
           </ListItemIcon>
           <ListItemText className={style.text}>{props.userName}</ListItemText>
         </ListItem>
           <Link to={`/users/${props.userDetails}`}>
               <ListItemIcon >
                   <ListAltIcon className={style.iconColor}/>
               </ListItemIcon>
           </Link>
     </Fragment>
 )
}

users:

export default function User({ data })  {


    const userList = data.map((row) => {
        return {user: row.user, details: row.action_type};
    });

    const [state] = React.useState({
      users: [...userList]
    });


 return (
  <div>
    <MaterialTable
      icons={tableIcons}
      title={<h1 className={style.title}>Users</h1>}
      columns={[
        {
          title: "Name",
          field: "name",
          render: rowData => (
            <UserRow userName={rowData.user}  />
          )
        },
        {
          title: "Details",
          field: "details",
          render: rowData => (
            <UserRow  userDetails={rowData.details} />
          )
        },
      ]}
      data={state.users}
      options={{
        search: true
      }}
    />
  </div>
)
}

Чего я хочу добиться, так это вызвать один раз компонент userRow в таблице material-ui и отобразить данные, как и в первом столбце, будут иметь значок, за которым следует имя, а во втором столбце будет просто значок, представляющий собой ссылку.

Что теперь происходит с моим кодом, так это то, что значок переходит к двум столбцы.

Токовый выход: enter image description here

Правильный вывод: enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...