如何同時使用道具和帖子？

Question

這是我用於顯示個人資料詳細信息的代碼。 我只想知道道具和帖子能不能同時使用？

如果是，我使用的方式是否正確？

這是我的完整代碼- 我收到錯誤消息“編譯失敗。

./src/components/Profile.js 第 91 行：'posts' 未定義 no-undef"

import React, {useState, useEffect} from "react";
import {Link} from "react-router-dom";
import styled from "styled-components";
import axios from "axios";
import spinner from "../spinner.gif";




const Profile = props => {

  const [profile, setProfile] = useState([]);

const [First_Name, setFirstName] = useState("");
const [Last_Name, setLastName] = useState("");
const [Birthday, setBirthday] = useState("");
const [Gender, setGender] = useState("");
const [City, setCity] = useState("");
const [Country, setCountry] = useState("");
const [Contact_No, setContactNo] = useState("");
const [fileName, setFileName] = useState("");
const [Available_Day, setAvailableDay] = useState("");
const [Available_Date, setAvailableDate] = useState("");
const [Available_STime, setStartTime] = useState("");
const [Available_ETime, setEndTime] = useState("");


//Delete Profile by Id
const deleteProfile = id => {
  axios.delete(`/profiles/${id}`)
  .then(res => alert(res.data))
  setProfile(profile.filter(elem => elem._id !== id));
}



useEffect(() => {
    axios.get(`/profiles/${props.match.params.id}`)
    .then(res => [
        setFirstName(res.data.First_Name),
        setLastName(res.data.Last_Name),
        setBirthday(res.data.Birthday),
        setGender(res.data.Gender),
        setCity(res.data.City),
        setCountry(res.data.Country),
        setContactNo(res.data.Contact_No),
        setFileName(res.data.profileImage),
        setAvailableDay(res.data.Available_Day),
        setAvailableDate(res.data.Available_Date),
        setStartTime(res.data.Available_STime),
        setEndTime(res.data.Available_ETime)
    ])
    .catch(error => console.log(error));
}, [props]);



  return (
    <MainContainer>
      <img src={`/uploads/${fileName}`} alt="..." style={{
        margin: "0 auto",
        width: "50%",
        display: "flex"
      }}/>
      
      <br></br><br></br>
      
        {!First_Name || !Last_Name || !Birthday || !Gender || !City || !Country || !Contact_No || !Available_Day || !Available_Date || !Available_STime || !Available_ETime ? (<img src = {spinner} alt="loading..."/>
         ) : (
        <> 
        <h2>Dr. {First_Name} {Last_Name}</h2><br></br>
        <h3>Date of Birthday  : {Birthday}</h3><br></br>
        <h3>Gender            : {Gender}</h3><br></br>
        <h3>City              : {City}</h3><br></br>
        <h3>Country           : {Country}</h3><br></br>
        <h3>Contact Number    : {Contact_No}</h3><br></br>
        <hr></hr>
        <h3>Available on {Available_Day} - {Available_Date}</h3>
        <h3>From {Available_STime} a.m. to {Available_ETime} p.m. </h3><br></br>
       
        <br/>
        <Link to="/" type="submit" className="btn btn-primary">
            Back
            </Link ><br></br><br></br>

           
       </>

         )}

        {( posts.map((profile) => (
            
            <div className="row my-5">

            <div className="col-sm-2">
              <Link to={`/update/${profile._id}`} className="btn btn-outline-success">Edit Profile</Link>
            </div>

            <div className="col-sm-2">
              <button onClick={() => deleteProfile (profile._id)} className="btn btn-outline-danger">Delete Profile</button>
            </div>

          </div>
       

        )))}

    </MainContainer>
  );
};



export default Profile;

//Main Container
const MainContainer = styled.div`
    margin: 6rem auto;
    padding: 3rem 14rem;

    h2 {
        text-align: center;
        front-weight: 900;
        color: var(--dark-green)
    }


    img {
        width: 10rem;
        display: block;
        margin: 0 auto;
    }

    .btn-primary {
        background: var(--dark-green);
        border:none;
        &:hover {
          background: var(--light-green);
        }
      }

`;

Answer 1

歡迎來到 StackOverflow

讓我們假設您像這個例子一樣調用您的個人資料：

return (
  <Profile picture={picture} posts={posts}>{name}</Profile>
)

然后你會有一個等效的組件接受道具如下：

const Profile = ({ posts, picture, children }) => {}

而posts和picture是您在調用組件時引用的內容，而 children 是我們小示例中的name 。

可以在此處找到有關正在進行的旅程的更長更詳細的指南： ReactJS - 組件和道具

Answer 2

一旦參數在 function 中被解構，它們將自動成為道具。 不需要寫 props.post 就可以：

const myFunct = ({post}) => {
//
//
// 
} 

現在，您只需編寫 post.keyName 即可訪問帖子中的任何鍵值對