Отображение данных о пользователе в компоненте

Question

Только начал познавать Реакт, возникло не понимание, почему данные не отображаются при вызове.

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, {Component} from "react";

const users = [{id: 1, name: 'Вася', avatar:"../image/user/owl-user.svg"}];


class RegisteredUser extends Component() {

constructor(props){
    super(props);

    const author = props.users[0];

}

render() {
    
return (

    <div className="user_control ">
        <button className="btn_user decor-borders" onClick={() => console.log("")}>
            <Avatar user={author}/>
            <span className="btn_user__name">{author.name}</span>
        </button>

    </div>

)
}
}

function Avatar(props) {

const user = props.user;

return (
    <img className="Avatar"
         src={user.avatarUrl}
         alt={user.name}/>
);
}

<div>
  <RegisteredUser users={users} />
</div>


ReactDOM.render(
<OurApp />, document.querySelector("#app"))

Необходимо что б в кнопку, компонент RegisteredUser, отобразилось имя пользователя и его аватара. Не могу понять, почему оно не передает данные в классовый компонент

Answer 1

У вас несколько ошибок. В <img> вы передаете avatarUrl, а в объекте avatar.
В конструкторе у вас const author, и это определение видно только из конструктора. Тогда уж this.author = .. и использовать this.author. Но в таком случае у вас будет проблемы с обновлением компонента, он может не перерендериться, лучше через пропсы. Ну еще там по мелочи.

const users = [{
  id: 1,
  name: 'Вася',
  avatar:  "https://i.stack.imgur.com/2xhYH.png"
}];


class RegisteredUser extends React.Component {
  render() {
    const author = this.props.users[0];
    
    return (
      <div className="user_control">
        <button className="btn_user decor-borders">
          <Avatar user={author}/> 
          <span className="btn_user__name"> {author.name} </span> 
        </button>
      </div>
    )
  }
}

function Avatar({user}) {
  return <img height="14" className="Avatar" src={user.avatar} alt={user.name}/>
}

function OurApp(){
  return <div><RegisteredUser users={users}/></div>
}

ReactDOM.render( <OurApp/> , document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</script>

<div id="app"></div><div id="app"></div>

БЛОГ НА HUSL

Отображение данных о пользователе в компоненте

Ответы (1 шт):