为什么它没有显示 Button onclick 的获取响应

Question

我的 Button.js 和 index.js 有什么问题？在我将用户道具传递给面板组件后，index.js 中的 user={contact.name} 显示：

" Invariant Violation Objects 作为 React 子代无效（发现：带有键 {title, first, last} 的对象）。如果您要渲染一组子代，请改用数组。 在 h2 中（由 Panel 创建） 在 div 中（由 Panel 创建） 在 div 中（由 Panel 创建） 在面板中（由 App 创建） 在 div 中（由 App 创建） 在 div 中（由 App 创建） 在应用中“

如何在按下按钮时随机生成用户信息，并在按钮上方显示数据信息？

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Panel from "./ProfilePanel";
import axios from 'axios';
import './index.css';
import Button from './Button';

const url = 'https://randomuser.me/api/';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      contacts: []
    }
  }

  componentDidMount() {
    this.fetchdata();
  }

  fetchdata() {
    axios.get(url)
      .then(res => {
        console.log(res);
        this.setState({ contacts: res.data.results});
      });
  }

  render(){
    const {contacts} = this.state;
    return (
      <div className="panel">
          {contacts.map(contact => (
          <div class="panel">
            <Panel
              key={contact.picture} avatar={contact.picture.medium} user={contact.name}
            />
            <li class="flex-container">
              <Button title="name" >
                <p key={contact.name} user={contact.name}></p>
              </Button>
              <Button title="location" onClick={this.fetchdata}> 
              </Button>
              <Button key={contact.email} title="email">
              </Button>
              <Button key={contact.phone} title="phone">
              </Button>
              <Button key={contact.login.password} title="password">
              </Button>
            </li>
          </div>
            ))}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

ProfilePanel.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import './index.css';
import Button from './Button';

const style={
  borderRadius: 150,
  margin: 15,
}

class Panel extends Component {

  render() {
    const { avatar,  user } = this.props;
    return (
      <div className="Panel">
        <div class="panels">
          <div className="avatar">
            <img src={avatar} class="imageStyle" alt="" width={"200%"} height={"auto"}/>
          </div>
        </div>
        <div class="center">
          <h2 className="user">{user}</h2>
        </div>

      </div>
    );
  }
}

export default Panel;

Button.js

import './index.css';
import React, { Component } from 'react';

class Button extends Component {

  constructor(props) {
    super(props);
    this.state = {
      open:false,
    };
  }

  render() {
    const { title } = this.props;
    const {open} = this.state;
    return (
      <button className={` ${open ? 'open' : ''}`} 
      class='button' onClick={(e) => this.handleClick(e)}>
        <div className="panel-heading">
          <h2 class='buttoncenter'>{title}</h2>
        </div>
      </button>
    );
  }

  handleClick(e) {
    e.preventDefault();
    this.setState({
      open: ture
    })
  }
  }

  export default Button;

Answer 1

如果你看它说的错误

(found: object with keys {title, first, last}). If you meant to render a collection of children, use an array instead. in h2 (created by Panel)

这意味着你试图在你的 JSX 中渲染一个不允许的对象。它位于 Panel 组件的标题内。您需要渲染名称或进一步解构它{user.first}

<h2 className="user">{user}</h2>

另一方面，可能只是在这篇文章中，但在您的句柄单击中的按钮组件中，您可能有错字。应该是open: true 吗？

handleClick(e) {
    e.preventDefault();
    this.setState({
      open: ture
    })
}

Answer 2

检查contact.name 这似乎是一个对象，并且在 Panel 中您试图打印出 h2 标记内的对象

<h2 className="user">{user}</h2>