使用reactJS显示来自控制台的数据

tjvv9vkg 于 2023-02-15 发布在 React

关注(0)|答案(1)|浏览(170)

使用ReactJS '显示来自控制台的数据
下面是ReactJS代码。

const Newest = () => {
const data = useState([]);

var config = {
  method: 'get',
  maxBodyLength: Infinity,
  url: 'http://ec2-13-213-0-89.ap-southeast-1.compute.amazonaws.com:1337',
  headers: { 
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiaWF0IjoxNjc1OTIyODMwLCJleHAiOjE2Nzg1MTQ4MzB9.fDimJvV3gPtjys5EmxSSevHu_n217YK9X3BfH_IrQq8'
  },
};
axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

return(

    <div className='container'>
      {data.map((data)  => (
          <div className='primary_card' key={data.id}>
            <img src={data.name} alt=''/>
            <h5>{data.title}</h5>
            <p>{data.description}</p>
          </div>
        ))}

    </div>
      
);

};
export default Newest;

我尝试了对象Map，[我想在我的卡div中显示获取的数据]（https://i.stack.imgur.com/FUHrU.png）

reactjs

来源：https://stackoverflow.com/questions/75445045/display-data-from-console-using-reactjs

1条答案

按热度按时间

nbysray51#

我改变你的代码：

const Newest = () => {

    const [data,setData] = useState([]); // setDada will be able to change data state
    
    var config = {
      method: 'get',
      maxBodyLength: Infinity,
      url: 'http://ec2-13-213-0-89.ap-southeast-1.compute.amazonaws.com:1337',
      headers: { 
        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiaWF0IjoxNjc1OTIyODMwLCJleHAiOjE2Nzg1MTQ4MzB9.fDimJvV3gPtjys5EmxSSevHu_n217YK9X3BfH_IrQq8'
      },
    };
    axios(config).then(function(response) {
       const responseArray =  JSON.stringify(response.data); //covert response from json to array
       setData(responseArray.data); // responseArray includes 2 array : meta and data ; in this case we need data
    })
    .catch(function (error) {
      console.log(error);
    });

    return(
    
        <div className='container'>
          {data.map((dt)  => ( // please use diffirent name for properties
              <div className='primary_card' key={data.id}>
                <img src={dt.name} alt=''/>
                <h5>{dt.title}</h5>
                <p>{dt.description}</p>
              </div>
            ))}
    
        </div>
          
    );
  
  };
  export default Newest;

请阅读有关state in react的信息

赞(0）回复(0）举报 2023-02-15

我来回答

使用reactJS显示来自控制台的数据

1条答案

相关问题

热门标签

最新问答