75466


react中で1つの関数内で

[code]

    const [items, setItems] = useState([]);
    
[/code]

のようにし、itemを[]で初期化し、

[code]

    useEffect(() => {
      http.getItems().then((data) => {
        setItems(data);
      });
    }, []);
    
[/code]

で、jsonを取得しております。その後同じ関数内において

[code]

    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;
    };
    
[/code]

とし、最終的には

[code]

    return (
      <div className="App">
        <div className="container App-main">
          <div className="row">{itemList()}</div>
        </div>
      </div>
    );
    
[/code]

のようにして表示させたいのですが、実際のページには何も表示されておりません。  
React Developer Toolsでは

> hooks  
>  state:  
>  [{...},{...},{...}]

と表記され、きちんとitemsには配列が入っているようです。  
警告として

> Array.prototype.map() expects a return value from arrow function array-
> callback-return

が出ているため

> const itemList = function () {

のところでうまく処理できていないように思うのですが、  
どのようにすればよろしいでしょうか。  
以上のコードはまとめると次の通りです。

[code]

    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;
    
    
[/code]

またitem.jsは以下の通りです。

[code]

    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;
    
    
[/code]


CC BY-SA 4.0
2021-04-22T20:09:20.527
75455
2021-04-23T04:43:59.150
2021-04-22T20:17:40.843
30396
30396
question
javascript reactjs
reactjsでstateの変更ができない

[code]

      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;
      };
    
[/code]

`items`の配列を`.map()`でReact
Elementに変換してると思いますが、`.map()`に渡しているアロー関数で値がreturnされていないため、変換できていません。

以下の様にreturnするように修正してみてください。

[code]

      const itemList = function () {
        const list = items.map((item) => {
          return (
            <div className="foo" key={item.id}>
              <Item title={item.title} price={item.price} URL={item.url} />
            </div>
          );
        });
        return list;
      };
    
[/code]

また、アロー関数はreturnが1行だけの場合、`{}`と`return`を省略できますので、以下の様に書くこともできます。

[code]

      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;
      };
    
[/code]


CC BY-SA 4.0
2021-04-23T04:43:59.150
75466
2021-04-23T04:43:59.150
3068
75455
answer