Question

我的反应挂钩无法正常运行。
我无法更新用户的状态。下图描述了尝试获取数据并呈现数据时收到的错误消息：

看来我的组件不会渲染。这是注释中要求的组件的源代码：

import React, { useEffect, useState } from "react";
import axios from "axios";
import map from "../map.png";
import { Row, Col } from "react-bootstrap";

const Profile = (props) => {
  const { id } = props.match.params;
  const [user, setUser] = useState(0);

  useEffect(() => {
    axios
      .get(`http://jsonplaceholder.typicode.com/users`)
      .then((response) => {
        const userAuthor=response.data.filter( (postAuthor) => postAuthor.id !== +id);
        setUser(userAuthor=>userAuthor)
      })
      .catch((error) => {
        console.log(error);
      });
  },[]);
  return (
    <div className="content-card">
      {
        console.log(user)
      }
      <Row className="justify-content-center post">
        <Col md="6">
          <h1 className="profile-name">{user.name}</h1>
          <Row>
            <Col md="3" className="profile-key">
              Username
            </Col>
            <Col md="9" className="profile-value">
              {user.username}
            </Col>
            <Col md="3" className="profile-key">
              Email
            </Col>
            <Col md="9" className="profile-value">
              {user.email}
            </Col>
            <Col md="3" className="profile-key">
              Phone
            </Col>
            <Col md="9" className="profile-value">
              {user.phone}
            </Col>
            <Col md="3" className="profile-key">
              Website
            </Col>
            <Col md="9" className="profile-value">
              {user.website}
            </Col>
            <Col md="3" className="profile-key">
              Company
            </Col>
            <Col md="9" className="profile-value">
              {user.company}
            </Col>
          </Row>
        </Col>
        <Col md="6">
          <img src={map} />
        </Col>
      </Row>

      <h2>{user.name}</h2>
    </div>
  );
};
export default Profile;

Answer 1

这是尝试渲染对象时发生的问题。您的状态挂钩很好。从注释看来，您正在尝试呈现user.company这是一个对象。通过将其更改为user.company.name，您的代码应该可以正常运行

Answer 2

这是一个错误，因为您尝试渲染对象！

您不能将console.log(user)作为UI组件返回，只需将其从返回中删除，然后可以在useEffect之后使用它，或者在您的UI中渲染一些数据，例如 name

您的状态挂钩可能很好。

我不能使用钩子。我不能用对象setUser。我该怎么办？

2 个答案: