在获取 slug 的 id 之前，如何防止子反应组件呈现？

Question

此处数据以空数组属性 posts 开头。当它被分配一个新的属性一旦我得到 slug 时，我的 Comments 组件会使用新的 prop 值再次重新渲染，这意味着它会重新渲染两次，我怎样才能阻止子组件渲染直到我获取slug 的 id

export const SinglePost = () => {

const { Content } = Layout;
const { Title, Paragraph, Text } = Typography;

const { slug } = useParams();


const [post, setPost] = useState({ posts: [] });

useEffect(() => {
axios.get(slug).then((res) => {
    setPost({ posts: res.data });
    console.log('a single post', res.data);
      });
}, [slug]);

let AuthorBlog = data.posts.author
let comment = data.posts.id


return (
      <>
<div className="container-fluid">
    <div className="row">
        <div className="col-12 col-md-8 col-lg-9">
            <SimpleBar style={{ maxHeight: '90%'}}>
                <Layout style={{ textAlign: 'center' }}>
                    <Content style={{ padding: '10rem 5% 2rem' }}>
                        <Image
                            className={ArticleCSS.Img}
                            src={data.posts.image}
                            preview={false}/>
                    <Layout>
                        <Typography className={ArticleCSS.info} >
                            <Title level={2} className={ArticleCSS.mainTitle}>{data.posts.title}</Title>
                            <Text>Created By: <Text strong className='writer'>{data.posts.author}</Text></Text>
                                <div className='dateDiv'><ClockCircleOutlined style={{color: 'rgb(59, 110, 145)',
                                        fontSize: '1.2rem', paddingRight: '0.6rem' }} />
                                <Text className='date'>On{" "}{moment(new Date(data.posts.published)).format("YYYY-MM-DD")}</Text></div>
                        </Typography>
                    </Layout>
                    <Layout className={ArticleCSS.ArticleContent}>
                        <Typography>
                            <Paragraph className={ArticleCSS.cardText}>{data.posts.content}</Paragraph>
                        </Typography>
                    </Layout>
                </Content>
            </Layout>
        <CommentComp id = {comment}/>
        <Comments id={comment} />
        </SimpleBar>
    </div>
    <div className={`col-12 col-md-4 col-lg-3 ${ArticleCSS.cold}`}>
        <RelatedBlog AuthorBlog = {AuthorBlog}/>
       </div>
     </div>
   </div> 
   </>
        );
        };

comments.js

export const Comments = (props) => {

console.log("Id post is:", props.id);

const [fetchComments, setFetchComments] = useState(true);
const [commentsList, setCommentsList] = useState([]);



useEffect(() => {
     axios.get(`comment/list/?blog_id=${props.id}`).then(
            (res)=> {
                setFetchComments(false);
                setCommentsList(res.data);
                console.log("from filter Commenst",res.data);
            },
            (err) => {
                console.error(err.response.data);
            }
        );

},[props.id]);


return (
  <div className='container'>
      <h5>Comments</h5>
      {fetchComments && <i>Loading...</i>}
      {!fetchComments && commentsList.length < 1 ? (
           <h5>No Comments for this Blog</h5> 
        ):(
            commentsList.map((item, key) => {
                return <CommentCard data={item} key={key} />
            })
        )}
    </div>

 )
 };

This image shows what I'm talking about. I don't want the child to render for the first time since I don't want to get with an undefined ID.

Answer 1

我相信您需要将 axios 调用包装在匿名异步函数中，以使其按照您的预期运行。您可以通过以下方式完成它：

useEffect(() => {
  (async () => {
    await axios.get(slug).then((res) => {
      setPost({ posts: res.data });
      console.log('a single post', res.data);
    });
  })()
}, [slug]);

试一试，如果有效请告诉我！

Answer 2

从我目前收集到的信息来看，您似乎不想在定义 id 值之前呈现 Comments 组件。为此，您可以使用 conditional rendering.

示例：

export const SinglePost = () => {
  const { slug } = useParams();
  const [post, setPost] = useState({ posts: {} });

  useEffect(() => {
    axios.get(slug).then((res) => {
      setPost({ posts: res.data });
      console.log('a single post', res.data);
    });
  }, [slug]);

  return (
    ...
    {!!post.posts.id && <Comments id={post.posts.id} />}
    ...
  );
};

在获取 slug 的 id 之前，如何防止子反应组件呈现？

How can I prevent a child react component from rendering until I fetched id for slug?

javascript

reactjs

react-hooks