Question

我一定是做错了。我正在开发一个代码集，它可以调用REST端点来获取啤酒信息，然后我循环显示它并显示一些信息。没有什么花哨的东西，而且看起来不太好看的CSS等等，但是在我的啤酒阵列上循环不起作用：

关键部分如下。我从端点获取数据并将其添加到处于我状态的'beersList'数组中。然后在JSX中循环它：

       this.state.beerList.map(beer => {
          <div>
            <div className="beer-img">
              <img src={beer.img} height="350" />
            </div>
            <div className="beer-info">
              <h2>{beer.name}</h2>
            </div>
          </div>
        })

..麻烦的是，屏幕上没有显示任何内容，<div>都没有生成。

我知道调试时beerList填充了我之后的数据，并且在控制台中我可以映射它并打印出信息。但在屏幕上没有任何反应，我无法弄清楚为什么？

Answer 1

你必须return map内的this.state.beerList.map(beer => { return ( <div key={beer.id}> <div className="beer-img"> <img src={beer.img} height="350" /> </div> <div className="beer-info"> <h2>{beer.name}</h2> </div> </div> ); });：

()

您也可以使用this.state.beerList.map(beer => ( <div key={beer.id}> <div className="beer-img"> <img src={beer.img} height="350" /> </div> <div className="beer-info"> <h2>{beer.name}</h2> </div> </div> ));直接返回JSX：

public void HandleMessage(object message)
    {
        switch (message)
        {
            case string bookTitle:
                Console.WriteLine($"Received book with title : {bookTitle}");
                break;

            case int bookId:
                Console.WriteLine($"Received book with Id : {bookId}");
                break;

            //case (long Id,string Title) book:
            //    Console.WriteLine($"Received book Id : {movie.}");
            //    break;

            case ValueTuple<long, string> book:
                Console.WriteLine($"Received book Id : {book.Item1}, {book.Item2}");
                break;

            default:
                Console.WriteLine($"Received unknown book : {message}");
                break;
        }
    }

Answer 2

根据Fabian的建议，请使用()或return并确保在key内提供.map()属性以避免 Reactjs警告喜欢：

{this.state.beerList.map(beer => ( <div key={beer.id}> <div className="beer-img"> <img src={beer.img} height="350" /> </div> <div className="beer-info"> <h2>{beer.name}</h2> </div> </div> ))}

为什么我不能在JSX中对这个数组进行map（）？

2 个答案: