时间戳

首页 > 解决方案 > 使用 SetState (React Native) 更好地使用条件渲染

reactjs - 使用 SetState (React Native) 更好地使用条件渲染

问题描述

我正在根据特定值呈现产品列表。我正在使用 Picker 组件进行渲染，当它与 306 不同时，我正在加载选定的产品，但如果我回到第一个 PickerItem (306)，我想再次显示所有产品......例如：

if (Value != '306') {
        this.setState({
            // isAll: false,
            labels,
            Colours: Value,
            filteredProducts: this.state.displayProducts.filter(product => product.colour == Value)
        }, () => {
            this.onLoadFilteredLabels();
        });
    } else {
        this.setState({
            // isAll: true,
            Colours: Value,
            displayProducts: this.state.products,
            displayLabels: this.state.labels
        });
    }

如果有更好的方法，我正在寻找一些建议？你认为我应该分开每个 setState 吗？它正在工作，但我觉得这有点棘手，我仍在学习。所以我知道我可以在这里和这里的人一起提供商品建议！

谢谢

标签： reactjsreact-nativeconditionalrendersetstate

解决方案

最简单的方法是创建一个自定义对象来设置状态并在自定义方法中传递参数。除此之外，使用三元可能是有益的：

let stateObj = value === '306' ? {obj : {
            // isAll: true,
            Colours: Value,
            displayProducts: this.state.products,
            displayLabels: this.state.labels
        }, func : () => {
            return false;
        }} : {obj : {
            // isAll: false,
            labels,
            Colours: Value,
            filteredProducts: this.state.displayProducts.filter(product => product.colour == Value)
        }, func : () => {
            this.onLoadFilteredLabels();
        }}

this.stateSetter(stateObj);

接下来定义您的自定义方法：

stateSetter = (stateObj) => {
  let {obj, func} = stateObj; 
  this.setState(obj,func);
}

推荐阅读