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

Question

我有 2 个帖子组件列表，当点击明信片上的链接时，我正在进入帖子。
我无法访问子组件中的 props.postDetails。当我控制台记录 Prop 时，我有 {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超过 1 个位置的组件。
这里的问题是在 Home.js您正在传递 postDetails Prop ，(<Post postDetails={post.pic} />)，但在 app.js你只是从 Route 传递路线 Prop , (<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>
  );
};

当然还有空间让它更健壮一些，但这是一个好的开始。
附加建议
而不是保存 post对于您想要呈现的内容/方式而言，未正确形成的状态，您可以转换响应数据 之前 将其保存到状态。这节省了每次组件重新渲染时进行转换的不必要步骤。

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 键放在最外面的映射元素 div在你的情况下。

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

演示