Question

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

＆＃34;不变违规对象无效作为React子对象（找到：具有键{title，first，last}的对象）。如果您要渲染子集合，请使用数组。在h2（由Panel创建）在div（由Panel创建）在div（由Panel创建）在Panel中（由App创建）在div（由App创建）在div（由App创建）在App＆＃34;

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

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>

为什么它没有用Botton onclick显示获取响应

2 个答案: