使用 axios 从 Node.js Rest Api 中提取数据到 React

Question

我是新来的，Node.js，所以如果这很简单，我很抱歉。我一直在尝试使用 Axios 将运行 Express 的 Node.js Api 中的数据提取到 React 组件中。我尝试了许多不同的方法，并寻找没有运气的解决方案。我无法访问 Id 以及 ProductName

JSON 数据

{"Results":
     [
       {"id":4,"productName":"Flap Disc"}, {"id":5,"productName":"Fiber Disc"}
     ]
}

无论出于何种原因，我都无法访问这些对象中的数据。

代码

export default function Parent () {
const [products, setProducts] = React.useState('');

const url = 'http://localhost:3040/';

React.useEffect(()=>{
    async function getProduct(){
        const response = await axios.get(`${url}`);
        const a = (response.data.Results)
        setProducts(a.map((item)=> 
        {item}
        ))
    }
    getProduct()
}, [])

return(
    <div>
        {
            console.log(products)
            
        }
    </div>
)
}
     

Answer 1

在 JSX 中注销不会做任何事情。您要做的是映射数据并将其显示为组件。将您的回报更改为更像这样的东西

return (
  <div>
    {products?.map((product) => <p>{product.name}<p>)
  </div>
)

您还应该将产品的默认值从空字符串更改为空数组

const [products, setProducts] = React.useState([])