从父元素传递道具答案

【问题标题】：Passing props from parent element从父元素传递道具
【发布时间】：2020-07-26 09:37:18
【问题描述】：

我需要在布局中渲染一个 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;

我收到类型错误：无法将 undefined 或 null 转换为对象。我想要做的是呈现一个组件，该组件在布局组件中获取http响应。响应需要向下传递给feed组件，该组件呈现post组件。我无法将http响应传递给Feed组件。

【问题讨论】：

您在哪一行出现错误？
能否使用 CodeSandbox 重现该问题？
const feedItems = Object.keys(props.users).map((key) => ({ id: props.users, ...props.users[key], }));

标签： javascript reactjs

【解决方案1】：

您的代码可能在这里中断

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

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

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

【讨论】：