通过 SetState (React Native) 更好地使用条件渲染

Question

我正在根据特定值呈现产品列表。我正在使用 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 分开吗？它正在工作，但我觉得它有点棘手，我还在学习。所以我知道我可以在这里和这里的人一起获得好的建议！

谢谢

Answer 1

您可以使用三元运算符、相等性检查等，这样您的代码看起来就干净了。例如，

this.setState({
  isAll: Value === '306',
  filterProducts: Value === '306' ? [yourFilterProducts] : [] 
});

Answer 2

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

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);
}

Answer 3

一般来说，如果您在一个条件的不同分支中有多个 setState() 调用是可以的。

但在你的情况下，最好只更新状态 Colours 并直接在 render 方法中过滤产品：

render() {
  const {products: allProducts, Colours} = this.state;
  const displayProducts = Value != '306' ? allProducts.filter(product => product.colour == Colours) : allProducts;

  return (
    <div>
      {displayProducts.map(product => <YourProductComponent key={product.id} product={product}/>)}
    <div>
  );
}

React 文档建议，如果你可以从 state or/and props 计算所需的数据，你应该这样做而不是引入新的 prop 或 state 变量。

PS：有一个共同的建议是在 setState() 中不要引用 this.state。 React 批量运行 setState，因此您最终可能会引用过时的状态。您应该传递一个函数作为 setState 的第一个参数。更多详情 here.

通过 SetState (React Native) 更好地使用条件渲染

Better use of conditional render with SetState (React Native)

conditional

render

setstate

reactjs

react-native