reactjs 不确定如何在react应用程序中Map和显示数据[duplicate]

omvjsjqw 于 2023-01-30 发布在 React

关注(0)|答案(2)|浏览(119)

- 此问题在此处已有答案**：

List elements not rendering in React [duplicate]（1个答案）
When should I use a return statement in ES6 arrow functions（6个答案）
十小时前关门了。
我的后端服务器中显示了如下数据

我想在我的前端react应用程序中显示这些数据。
到目前为止，我已经尝试了以下方法-

import {useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [data,setData] = useState([])
  useEffect( () => {
    fetch("http://127.0.0.1:5000/lang")
    .then(res =>  res.json())
    .then( res => {setData(res)} )
    console.log(data.languages)
  }, [] )
  return (
    <div className="App">
    {
        data.languages.map((data,i) => {
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {data.languages}
        </a>
      </header>
    })
    }
    </div>
  );
}

export default App;

我在提出此请求时遇到以下错误-

我做错了什么？

reactjs

来源：https://stackoverflow.com/questions/67826738/not-sure-how-to-map-and-display-data-in-react-app

2条答案

按热度按时间

rn0zuynd1#

您已使用数组初始化data，然后将对象分配给它，这导致代码中出错。您可以使用{languages: []}初始化data以解决此问题。此外，您的array#map中缺少return。

const { useState, useEffect } = React;

const result = { languages : [ {name: "Javascript"}, {name: "Python"}, {name: "Ruby"}]};
const apiResponse = () => new Promise(resolve => setTimeout(resolve(result), 1000));

const App = () => {
  const [data,setData] = useState({languages: []});
  
  useEffect(() => {
    apiResponse().then(res => setData(res));
  },[]);
  
  return (
    <div className="App">
    {
        data.languages.map(({name},i) => {
        return (
          <header className="App-header">
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" ><br />
            {name}
          </a>
          </header>
        )
    })
    }
    </div>
  );
 
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

赞(0）回复(0）举报 2023-01-30

kwvwclae2#

Map是array.prototype，所以需要检查data.lenguages是否是数组，并且map函数不返回任何东西。
这是为数组中的所有元素返回一个div

array.map(() => <div></div>)

这是返回undefined：

array.map(() => {<div><div>})

这是为数组中的所有元素返回div：

array.map(() => {return <div><div>})

你还需要返回一个元素，把它们都 Package 在div或wrapper中：

array.map(() => {return ( <>
                        <div>1<div>
                         <div>2<div>
                        <div>3<div>
                        </>
                         )})

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 不确定如何在react应用程序中Map和显示数据[duplicate]

2条答案

相关问题

热门标签

最新问答