Question

我是React的新手并尝试开发一个仪表板类型的应用程序，它有许多＆＃34; tiles＆＃34;，每个都显示一个代表报告指标的值。磁贴定义（标题等））在运行时从单个JSON文件中读取。但是，报告指标值每个磁贴需要1个远程API调用。这使用户可以立即显示切片的体验，并在解析报告指标时填写报告指标。我在React中对此进行建模时遇到了麻烦。这是我到目前为止的简化版本......

// tile info object
export interface ITileData {
  title: string;
  value: number;
}

// tile component
export interface IDashboardTileProps {
  tileData: ITileData;
}

export class DashboardTile extends React.Component<IDashboardTileProps, any> {
  public render(): JSX.Element {
    return (
        <div>{ this.props.tileData.title } = { this.props.tileData.value }</div>
    );
  }
}

// container component
const TILE_DEFS: ITileData[] = this.getTileDefsFromJson();

export interface ITileContainerState {
  tiles: ITileData[];
}

export class TileContainer extends React.Component<any, ITileContainerState> {

  constructor() {
    super();
    this.state = {
      tiles: TILE_DEFS
    };
  }

  public componentDidMount() {
    // load tile values
    this.state.tiles.map((tile, index) => {
      // *** THIS IS WHERE I NEED HELP ***
      // I need to make an HTTP API call for each tile to get its value
      // I don't want to call setState in a loop like this, but I do 
      // want the values to appear when they are resolved, not all at 
      // once when all of the HTTP calls are resolved.
    });
  }

  public render(): JSX.Element {
    return (
      <List
        items={ this.state.tiles }
        onRenderCell={ tile =>
          <DashboardTile tileData={ tile } />
        } />
    );
  }
}

有什么建议吗？

Answer 1

之前我做过类似的事情，其方式是：

this.state.tiles.map应返回<Tile>组件的数组，然后您需要创建一个Tile组件，该组件接收显示和api调用所需的所有参数。所有父容器都为它提供了进行自己的api调用并管理自己状态所需的道具。

这样做的好处是能够将那些状态更新隔离到该组件，让它渲染一个加载器/某种“我等待获得结果”每个磁贴的接口类型，它还会显示数据一旦得到api，所以你不必等待所有人完成。

到伪代码：

this.state.tiles.map((tile, index) => {
 return <Tile {...tile} />
}

class Tile extends Component {
  constructor() {
    super();

    this.state = { fetching: true, data: null } 

  }

  componentDidMount() {
    // make api calls here
    doApi().then((result) => {
      this.setState({fetching: false, data: result})
    });

  }
}

我不熟悉打字稿或者你正在使用的任何东西，所以这只是简单的反应和显然缺少的部分，但应该给你一般意义的想法。

React：如何在需要远程调用每个项目的数组中更新状态？

1 个答案: