react中で1つの関数内で
const [items, setItems] = useState([]);
のようにし、itemを[]で初期化し、
useEffect(() => {
http.getItems().then((data) => {
setItems(data);
});
}, []);
で、jsonを取得しております。その後同じ関数内において
const itemList = function () {
const list = items.map((item) => {
<div className="foo" key={item.id}>
<Item
title={item.title}
price={item.price}
URL={item.url}
/>
</div>;
});
return list;
};
とし、最終的には
return (
<div className="App">
<div className="container App-main">
<div className="row">{itemList()}</div>
</div>
</div>
);
のようにして表示させたいのですが、実際のページには何も表示されておりません。
React Developer Toolsでは
hooks
state:
[{...},{...},{...}]
と表記され、きちんとitemsには配列が入っているようです。
警告として
Array.prototype.map() expects a return value from arrow function array-callback-return
が出ているため
const itemList = function () {
のところでうまく処理できていないように思うのですが、
どのようにすればよろしいでしょうか。
以上のコードはまとめると次の通りです。
import HttpService from "./service";
import React, { useState, useEffect } from "react";
import Item from "./item";
const http = new HttpService();
function App() {
const [items, setItems] = useState([]);
useEffect(() => {
http.getItems().then((data) => {
setItems(data);
});
}, []);
const itemList = function () {
const list = items.map((item) => {
<div className="foo" key={item.id}>
<Item title={item.title} price={item.price} URL={item.url} />
</div>;
});
return list;
};
return (
<div className="App">
<div className="container App-main">
<div className="row">{itemList()}</div>
</div>
</div>
);
}
export default App;
またitem.jsは以下の通りです。
import React from "react";
function Item(props) {
return (
<div>
<img src={props.url}></img>
<div>
<h1>{props.title}</h1>
<p>Price: {props.price}</p>
<a href="#" className="btn btn-primary">
Add
</a>
</div>
</div>
);
}
export default Item;