代码之家 › 专栏 › 技术社区 › Jasper Kennis

如何在react中处理纯功能组件中的Ajax?

purely-functional reactjs ajax javascript

4

Jasper Kennis · 技术社区 · 9 年前

我试图把我所有的组件都写成纯函数,但现在我遇到了麻烦。我有一个组件,看起来有点像下面。问题是,ajax请求的结果会导致重新加载,这会导致另一个ajax要求,而这就是无限循环。如何妥善处理?

const PageProductFunnel = function (props) {
  const agent = ajaxagent;
  var list = [];

  agent.get(`https://mylist.com/${productSKU}`).then((res) => {
    list = res.data;
  });

  return (
    <div>
      <div className="cell">
        <article className="article">
          <h1 className="article-title">{product.name}</h1>
          <FunnelStep {...props} list={list} />
          <ButtonAddToCart product={product} />
        </article>
      </div>
    </div>
  );
};

4 回复 | 直到 9 年前

1

Davorin RuÅ¡evljan 9 年前

您可以采取以下几种方法:

不要对此组件使用纯函数,并将异步挂钩到生命周期方法中

2

0

Harkirat Saluja 9 年前

你需要使用 stateful 用于此的组件。

class PageProductFunnel extends React.Component {
  state = {
    "list": []
  }

  componentWillMount () {
    agent.get(`https://mylist.com/${productSKU}`).then((res) => {
      this.setState({list:res.data})
    });
  }

  render () {
    return (
      <div>
        <div className="cell">
          <article className="article">
            <h1 className="article-title">{product.name}</h1>
            <FunnelStep {...props} list={this.state.list} />
            <ButtonAddToCart product={product} />
          </article>
       </div>
      </div>
    );
  }
};

3

0

Jasper Kennis 9 年前

编辑

谢谢你的建议,但它们确实不能解决问题。到目前为止,我所有的代码都是纯的,我真的想坚持下去。在我的例子中,在全局级别进行调用不会改变任何事情,因为响应仍然会导致渲染。

if (props.list.length === 0) {
  agent.get(`https://mylist.com/${productSKU}`).then((res) => {
    props.setList(res.data);
  });
}

4

0

zakir 7 年前

进行ajax调用的更好的生命周期挂钩是 组件安装 (). 如果您特别喜欢使用纯组件,那么您也可以在纯组件中使用。

class Sample extends PureComponent{
  //react implement ShouldComponentUpdate for us which does shallow comparison
  componentDidMount(){
     //api call here
  }
 }

我们应该在项目中平衡有状态、纯组件和无状态。