Question

首先请求返回两个列表：list1，list2。所以我需要立即渲染list1。但对于list2我需要检查第二个请求然后显示他。哪里有更好的地方呢？

P.S。现在，我在componentDidMount项list2中执行此操作。 isChecking - 在请求结束时设置为true并给出结果。

const Container = (props) => <div>
    {props.list1.map(item => <Item {...item} />)}
    {props.list2.map(item => <Item {...item} check={true}/>)}
</div>;

class Item extends React.Component {
    componentDidMount() {
      if (check) {
        this.props.checkRequest();
      }
    }

    render() {
      if (this.props.check && !this.props.isChecking) {
        return <span />;
      }

      return <div>{item.name}</div>;
    }
}

Answer 1

如果您不需要list1的检查逻辑，则可以直接映射它而不使用Item组件，如下所示：

const Container = (props) => <div>
    {props.list1.map(item => <div>{item.name}</div>)} // <------- no Item component here
    {props.list2.map(item => <Item {...item} check={true}/>)}
</div>;

class Item extends React.Component {
    componentDidMount() {
      if (check) {
        this.props.checkRequest();
      }
    }

    render() {
      if (this.props.check && !this.props.isChecking) {
        return <span />;
      }

      return <div>{item.name}</div>;
    }
}

哪里提出请求更好（反应）

1 个答案: