未在 ui 中呈现的数据在使用 useEffect 做出反应

Question

我有关于页面的三个组件。目前他们正在使用静态数据。我添加了一个包含 sn-p 的组件，用于从 Heroku 中服务的后端获取数据。我使用 useEffect 在组件中添加了 url。我已经解决了 cors 问题，数据进入控制台但不在 ui 中。

用户界面如下所示：

虚拟数据“我在这里”被渲染，但不是来自 api 的数据。

我的 api 组件在这里：

function Contactinfoapi() {
    const [contacts, setContacts] = useState([])

    useEffect (() => {
        axios.get('https://example.herokuapp.com/api/contactinfo')
        .then(res =>{
            console.log(res)
            setContacts(res.data)
        })
        .catch(err =>{
            console.log(err)
        })
    },[])
    return (
        <div>
           <li className='aboutinfo'>{contacts.open_hour}</li>
           <li>{contacts.close_hour}</li>
           <li>{contacts.phone_1}</li>
           <li>{contacts.phone_2}</li>
           <li>{contacts.stree_name}</li>
           <li>{contacts.city}</li>
           <li>{contacts.state}</li>
           <li>{contacts.country}</li>
           <li className='aboutinfo'>{"Iam here"}</li>
        
    )
}

export default Contactinfoapi

我的 ContactPage.txs

import Contactinfoapi from "./Contactinfoapi";

const mapLink =
  "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6570.131683578319!2d-96.8230730791484!3d32.926443635844755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8092bd3dbb07ed!2sGrand%20Lux%20Cafe!5e0!3m2!1sen!2snp!4v1626151670035!5m2!1sen!2snp";

class ContactPage extends Component {
  render() {
    return (
      <div className="contact-page">
        <PageHeader title="Contact Us" btnText="" />
        <div className = 'aboutinfo'>
          <ContactCards /> 
        </div>
        
        <Contactinfoapi />
        <div className="map-container">
          <iframe
            src={mapLink}
            title="map"
            loading="lazy"
            className="map"></iframe>
        </div>
      </div>
    );
  }
}

export default ContactPage;

这里我已经导入了 Contactinfoapi，但是数据没有呈现到 ui。有什么问题？？

Answer 1

在contactinfoapi组件中试试这个 带地图 功能联系信息API（）{ const [联系人，setContacts] = useState([])

useEffect (() => {
    axios.get('https://example.herokuapp.com/api/contactinfo')
    .then(res =>{
        console.log(res)
        setContacts(res.data)
    })
    .catch(err =>{
        console.log(err)
    })
},[])
return (
<div>
contacts.map(contact=>{
<div>
       <li className='aboutinfo'>{contact.open_hour}</li>
       <li>{contact.close_hour}</li>
       <li>{contact.phone_1}</li>
       <li>{contact.phone_2}</li>
       <li>{contact.stree_name}</li>
       <li>{contact.city}</li>
       <li>{contact.state}</li>
       <li>{contact.country}</li>
       <li className='aboutinfo'>{"Iam here"}</li>
    </div>
})
  </div>   
)

}

由于您将联系人指定为数组，我们需要对其进行迭代。 没有地图

 function Contactinfoapi() {
const [contact, setContacts] = useState({})

useEffect (() => {
    axios.get('https://example.herokuapp.com/api/contactinfo')
    .then(res =>{
        console.log(res)
        setContacts(res.data[0])
    })
    .catch(err =>{
        console.log(err)
    })
},[])
return (

<div>
       <li className='aboutinfo'>{contact.open_hour}</li>
       <li>{contact.close_hour}</li>
       <li>{contact.phone_1}</li>
       <li>{contact.phone_2}</li>
       <li>{contact.stree_name}</li>
       <li>{contact.city}</li>
       <li>{contact.state}</li>
       <li>{contact.country}</li>
       <li className='aboutinfo'>{"Iam here"}</li>
    </div>

    
)

}