将 props 从父组件转发到子组件

Question

我有 2 个帖子组件列表，当单击明信片上的链接时，我正在进入帖子。 我无法访问子组件中的 props.postDetails。当我控制台记录道具时，我有 {history: {…}, location: {…}, match: {…}, staticContext: undefined} 只有这个没有 props.postDetails。 有人可以帮忙吗？

父组件的代码是：

mport {useState, useEffect} from 'react';
import {BrowserRouter as Router, Switch, Route, Link, withRouter} from "react-router-dom";
import logo from "./assets/images/logo.jpg";
import Post from './Post';


const Home = () => {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        getResults();
    },[]);

    const getResults =() => {
        fetch("https://blog-d8b04-default-rtdb.europe-west1.firebasedatabase.app/posts.json")
            .then(response => response.json())
            .then(data => {setPosts(data)});
    }

    const postsArr = [];
    Object.values(posts).forEach((post, key) => {
        postsArr.push(post);
    });

    return(
        <div>
            <div className="container-fluid">
                <div className="row">
                    <div className="posts-container col-md-12">
                        <div className="row">
                            {
                                postsArr.map((post, key) => (
                                    <div className="col-md-4">
                                        <Link to={`/post/${key}`} >
                                            <div className="pic-wrapper">
                                                <img className="img-fluid" src={post.pic} alt={post.title}/>
                                            </div>
                                            <h4>{post.title}</h4>
                                            <Post postDetails={post}/>
                                        </Link>
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

子组件代码：

import {withRouter} from "react-router-dom";


const Post = (props) => {
    const {pic, title, author, description} = props.postDetails;
    return(
        <div className="container">
            <div className="pic-wrapper">
                <img className="img-fluid" src={pic} alt={title}/>
            </div>
            <h4>{title}</h4>
            <p>{author}</p>
        </div>
    )
}

export default withRouter(Post);

Answer 1

问题

好吧，我开始怀疑了。您在不止一个地方渲染 Post 组件。

这里的问题是，在Home.js 中，您传递了一个postDetails 道具，(<Post postDetails={post.pic} />)，但在app.js 中，您只传递了来自Route 的路线道具，(<Route path="/post/:postId" exact strict component={Post} />)。 这个 Post 组件是触发错误的组件。

解决方案

一个简单的解决方案是简单地将post 数据与路由转换一起传递。

<Link
  to={{
    pathname: `/post/${key}`,
    state: {
      post
    }
  }}
>
  ...
  <Post postDetails={post.pic} />
</Link>

并在Post中访问接收端的路由状态。尝试先从 props 中读取帖子详细信息，如果它们是错误的（null 或未定义），则假定它是在路由状态中传递并在那里访问它。

const Post = (props) => {
  const { state } = props.location;
  const { pic, title, author, description } = props.postDetails ?? state.post;
  return (
    <div className="container">
      <div className="pic-wrapper">
        <img className="img-fluid" src={pic} alt={title} />
      </div>
      <h4>{title}</h4>
      <p>{author}</p>
    </div>
  );
};

当然还有空间让它更健壮一些，但这是一个好的开始。

补充建议

您可以将响应数据在保存到状态。这样就省去了每次组件重新渲染时都进行转换的不必要步骤。

const getResults = () => {
  setLoading(true);
  fetch(
    "https://blog-d8b04-default-rtdb.europe-west1.firebasedatabase.app/posts.json"
  )
    .then((response) => response.json())
    .then((data) => {
      setPosts(Object.values(data));
      setLoading(false);
    });
};

然后照常映射。确保将 React 键放在 outer-most 映射元素上，在您的情况下为 div。

{posts.map((post, key) => (
  <div className="col-md-4" key={key}>
    ...
  </div>
))}

演示

Answer 2

这确实是一种预期的行为，因为您实际上正在映射看起来是一个空数组 - 请参阅postArr;在您第一次渲染时，它会生成一个空数组，因为这不是一个状态，所以它永远不会使用适当的道具重新渲染您的子组件。

我真的不明白你为什么要获取数据，将它们设置为posts useState，然后将它们复制到普通变量；相反，请删除您的 postArr 并在地图上直接将其替换为您的 posts。

由于这是一个状态，react 将监听更改并相应地重新渲染，从而解决您的问题