Question

我已经使用扩展运算符将来自 api（在 Heroku 服务器中提供）的数据作为道具传递给子组件。数据未在 ui 中呈现。虽然没有任何错误显示。我不确定是什么问题。

我的 ContactCards.js

function ContactCards() {

  const[contacts, setContacts] = useState([])

  useEffect(() => {
    axios.get('https://texas-crm1.herokuapp.com/api/contactinfo')
      .then (res =>{
        console.log(res.data[0])
        let data = res.data[0];
        // setContacts (res.data[0])
        setContacts(contacts => { 
          return[
               
                      {
                        thumbnail: clock,
                        title: "Opening Times",
                        data1: contacts.open_hour,
                        data2: contacts.close_hour,
                      },
                      {
                        thumbnail: telephone,
                        title: "Phone",
                        data1: contacts.phone_1,
                        data2: contacts.phone_2,
                      },
                      {
                        thumbnail: location,
                        title: "Location",
                        data1: contacts.street_name,
                        data2: contacts.city + ", " + contacts.state + ", " + contacts.country,
                      },
                    ]
        });

      })  
      .catch(err =>{
        console.log(err)
      })
  },[])


return (
    <div>
      <div className="contact-cards">
        {contacts.map((contact) => {
          return <ContactCard {...contact}  />;
        })}
      </div>
    </div>  
    );
}

export default ContactCards;

这里我使用了 ...contact 作为传播运算符作为道具。

我的 ContactCard.js

function ContactCard(props) {
  const {thumbnail,title,data1,data2} = props;
  return (
    <div className="contact-card">
         <div className="container">
           <div className="thumbnail">
             <img src={props.thumbnail} alt={props.thumbnail} />
          </div>
           <div className="title">{props.title}</div>
          <div className="data">{props.data2}</div> 
          <div className="data">{props.data2}</div>
        </div>
      </div>
  )
}




export default ContactCard;

这里我已经定义了一个 const 的 props 并定义了里面的所有 props。这里只渲染缩略图，但没有其他数据。缩略图和标题是静态数据，而 data1 和 data2 来自 api。希望我解释得很好。

在上图中，缩略图显示在数据2上，未定义显示。前两个缩略图中的其他数据为空。

Answer 1

尝试直接传递您的道具，而不是将它们传播到组件。并在数据可用时呈现它们。

编辑：由于您已将联系人预定义为空数组，因此您必须检查其长度。

return (
    <div>
      <div className="contact-cards">
        {contacts.length > 0 && contacts.map(
           ({thumbnail, title, data1, data2}) => 
               <ContactCard thumbnail={thumbnail} title={title} data1={data1} data2={data2}  />;
           )}
      </div>
    </div>  
    );

对于 ContactCard 组件，这不是问题，但为了学习，您也可以访问这样的道具。使代码更具可读性。

function ContactCard({thumbnail,title,data1,data2}) {
  
  return (
    <div className="contact-card">
         <div className="container">
           <div className="thumbnail">
             <img src={thumbnail} alt={thumbnail} />
          </div>
           <div className="title">{title}</div>
          <div className="data">{data2}</div> 
          <div className="data">{data2}</div>
        </div>
      </div>
  )
}

Answer 2

您的问题在这里：

useEffect(() => {
  axios.get('https://texas-crm1.herokuapp.com/api/contactinfo')
    .then (res =>{
      console.log(res.data[0])
      let data = res.data[0];
      setContacts(contacts => { 
        return[
          {
            thumbnail: clock,
            title: "Opening Times",
            data1: contacts.open_hour, // <--- it should be data.open_hour
            ...
          },
          ...
        ]
      });
    })  
    .catch(err =>{
      console.log(err)
    })
},[])

contacts 指的是当前状态，它被初始化为一个空数组，因此 contacts.xyz 总是会是 undefined。你应该拥有的是：

...
setContacts([
  {
    thumbnail: clock,
    title: "Opening Times",
    data1: data.open_hour,
    ...
  },
  ...
]);
...

数据未通过道具传递给子组件

2 个答案: