React возвращает не html, а [object Object]

203

13 сентября 2021, 16:50

Почему при нажатии на кнопку возвращает [object Object], а не то, что находится в render компонента UserList? Помогите исправить.

CodeSandBox: https://codesandbox.io/s/lab5-zdmjq

index.js

import React from "react";
import ReactDOM from "react-dom";
import Button from "../App/Button";
import "./styles.css";
function App() {
  return (
    <div>
      <div id="info-title">Информация о 10 пользователях</div>
      <Button />
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Button.js

import React from "react";
import UserList from "./UserList";
export default function Button() {
  async function getUsers() {
    let url =
      "https://randomuser.me/api/1.3/?results=10&inc=gender,name,location,email,dob,phone,picture";
    let response = await fetch(url);
    let json = await response.json();
    let results = json.results;
    let root = document.getElementById("root");
    const userList = <UserList users={results} />;
    root.append(userList);
  }
  return (
    <div>
      <button onClick={getUsers}>Получить</button>
    </div>
  );
}

UserList.js

import React from "react";
export default class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: props.results
    };
  }
  render() {
    return <div>UserList</div>;
  }
}

Answer 1

JSX это не html. Он транспилируется в вызов функции React.createElement, которая действительно возвращает объект.

let root = document.getElementById("root");
const userList = <UserList users={results} />;
root.append(userList);

Это не правильно, используйте полноценный компонент с state, если хотите модифицировать поддрево. Но, чтобы исправить [object Object] с этим кодом, можно сделать так:

import ReactDOM from "react-dom";
export default function Button() {
  async function getUsers() {
    ...
    ReactDOM.render(
        <UserList users={results} />,
        document.getElementById("root"),
    );
  }
  return (
    <div>
      <button onClick={getUsers}>Получить</button>
    </div>
  );
}