Question

我需要在布局中渲染Feed组件，但我无法传递道具。

这是布局组件。

import React, { Component } from "react";
import Header from "../Header/Header";
import classes from "./Layout.css";
import { Route, Switch } from "react-router-dom";
import axios from "axios";
import Aux from "../Aux/Aux";
import Feed from "../Feed/Feed";

class Layout extends Component {
  state = {
    users: null,
  };

  componentDidMount() {
    axios
      .get("https://goodwill-60d8a.firebaseio.com/Users.json")
      .then((response) => {
        this.setState({ users: response.data });
      });
  }

  render() {
    let feed = () => {
      return (
        <Aux>
          <Feed users={this.state.users} />
        </Aux>
      );
    };
    return (
      <div className={classes.main}>
        <div>
          <Header />
        </div>
        <div className={classes.content}>
          <Switch>
            <Route path="/" exact component={feed} />
            <Route path="/fullpost" component={FullPost} />
          </Switch>
        </div>
      </div>
    );
  }
}

export default Layout;

这是提要组件

import React from "react";
import Post from "./Post/Post";
import classes from "./Feed.css";

const feed = (props) => {
  const feedItems = Object.keys(props.users).map((key) => ({
    id: props.users,
    ...props.users[key],
  }));
  return (
    <div className={classes.feed}>
      {feedItems.map((items) => (
        <Post
          key={items.id}
          profileName={items.profileName}
          profilePic={items.profilePic}
          timeStamp={items.timeStamp}
          contentImage={items.contentImage}
          contentText={items.contentText}
          trend={items.trend}
        ></Post>
      ))}
    </div>
  );
};

export default feed;

这是帖子的组成部分。

import React from "react";
import classes from "./Post.css";
import ShareButton from "../../UI/ShareButton/ShareButton";
import { Link } from "react-router-dom";

const post = (props) => {
  return (
    <div className={classes.post}>
      <div className={classes.header}>
        <div className={classes.profileimage}>
          <img className={classes.pic} src={props.profilePic} alt="" />
        </div>
        <div className={classes.name}>{props.profileName}</div>
        <div className={classes.timestamp}>{props.timeStamp}</div>
      </div>
      <div className={classes.container}>
        <div className={classes.image}>
          <img src={props.contentImage} alt="" />
        </div>
        <div>
          <div className={classes.text}>
            <span>{props.contentText}</span>
          </div>
          <div className={classes.fullpost}>
            <Link to="/fullpost">See Full Post</Link>
          </div>
        </div>
      </div>
      <div className={classes.footer}>
        <div className={classes.trend}>
          <span>{props.trend}</span>
        </div>
        <ShareButton />
      </div>
    </div>
  );
};

export default post;

我收到类型错误：无法将未定义或null转换为对象。我想做的是渲染一个在布局组件中获取http响应的组件。该响应需要向下传递到feed组件，从而渲染发布组件。我无法将http响应传递给Feed Component。

Answer 1

您的代码可能在这里破了

const feedItems = Object.keys(props.users).map((key) => ({
    id: props.users,
    ...props.users[key],
  }));

虽然您的API请求正在解析props.users的值，但它为null。您可以：

向用户状态添加默认值，使其成为空对象。
为用户prop添加默认值
在运行Object.keys之前添加检查以查看该对象是否为null或未定义。

从父元素传递道具

1 个答案: