Question

我已经为此完成了一个非常相似的代码并且它已经有效，但是，我从中得不到任何结果。在console.log数据的哪个地方，我看到正确的对象数组，但是我在console.log用户的位置，我得不到任何东西，并且不会调用User组件。当我为用户插入不同的静态值时，它可以工作

import React, { Component } from 'react';
import User from './user';

export default class UserResults extends Component {
  render() {
    let data = this.props.data;
    let results;
    if (data) {
      console.log(data);
      results = data.map(user => {
        console.log(user);
        return (
          <User key={user.name}
            stream={user.stream}
            name={user.name}
            logo={user.logo}
            url={user.url} />
        );
      })
    }
    return (
      <tbody className="UserResults">
        {results}
      </tbody>
    );
  }
}

以下是我记录数据时显示的内容

0:{stream: null, name: "storbeck", logo: null, url: "https://api.twitch.tv/kraken/channels/storbeck"}
1:{stream: null, name: "FreeCodeCamp", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/fre…decamp-profile_image-d9514f2df0962329-300x300.png", url: "https://api.twitch.tv/kraken/channels/freecodecamp"}
2:{stream: null, name: "OgamingSC2", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/oga…ngsc2-profile_image-9021dccf9399929e-300x300.jpeg", url: "https://api.twitch.tv/kraken/channels/OgamingSC2"}
3:{stream: null, name: "habathcx", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/habathcx-profile_image-d75385dbe4f42a66-300x300.jpeg", url: "https://api.twitch.tv/kraken/channels/habathcx"}
4:{stream: null, name: "RobotCaleb", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/robotcaleb-profile_image-9422645f2f0f093c-300x300.png", url: "https://api.twitch.tv/kraken/channels/RobotCaleb"}
5:{stream: {…}, name: "ESL_SC2", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg", url: "https://api.twitch.tv/kraken/channels/ESL_SC2"}
6:{stream: null, name: "cretetion", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/cretetion-profile_image-12bae34d9765f222-300x300.jpeg", url: "https://api.twitch.tv/kraken/channels/cretetion"}
7:{stream: null, name: "noobs2ninjas", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/noo…ninjas-profile_image-34707f847a73d934-300x300.png", url: "https://api.twitch.tv/kraken/channels/noobs2ninjas"}

以下是user.js的代码，您还需要查看它

import React, { Component } from 'react';

export default class User extends Component {
  render() {
    let props = this.props;
    console.log(props);
    let message;
    if (props.stream !== null) {
      message = 'Online';
    } else {
      message = 'User is offline';
    }
    return (
      <tr className="User">
        <td><img src={props.logo} alt={props.name} /></td>
        <td><a href={props.url}>{props.name}</a></td>
        <td>{message}</td>
      </tr>
    );
  }
}

Answer 1

找出答案。在我进行API调用的地方，我是异步设置状态，因此数据实际上的长度为0，尽管它不是空的。我移动了我的setState调用并获得了所需的输出。

Answer 2

尝试一次添加一个道具。如果您map内的<User />尝试仅将<?xml version="1.0" encoding="utf-8" ?> <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyProject.XForms.Controls.GradientView"> </ContentView>添加到using SkiaSharp; using SkiaSharp.Views.Forms; using Xamarin.Forms; namespace MyProject.XForms.Controls { public partial class GradientView : ContentView { public Color StartColor { get; set; } = Color.Transparent; public Color EndColor { get; set; } = Color.Transparent; public bool Horizontal { get; set; } = false; public GradientView() { InitializeComponent(); SKCanvasView canvasView = new SKCanvasView(); canvasView.PaintSurface += OnCanvasViewPaintSurface; Content = canvasView; } void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args) { SKImageInfo info = args.Info; SKSurface surface = args.Surface; SKCanvas canvas = surface.Canvas; canvas.Clear(); var colors = new SKColor[] { StartColor.ToSKColor(), EndColor.ToSKColor() }; SKPoint startPoint = new SKPoint(0, 0); SKPoint endPoint = Horizontal ? new SKPoint(info.Width, 0) : new SKPoint(0, info.Height); var shader = SKShader.CreateLinearGradient(startPoint, endPoint, colors, null, SKShaderTileMode.Clamp); SKPaint paint = new SKPaint { Style = SKPaintStyle.Fill, Shader = shader }; canvas.DrawRect(new SKRect(0, 0, info.Width, info.Height), paint); } } }，请取消注释您在组件中使用它们的位置，以便尽可能从基本开始并自己动手使用所有的道具。然后你会弄清楚它的表现在哪里。

如果出现问题，你不会收到错误，这是非常奇怪的。

React .map（）不显示数据

2 个答案: