使用 SetState (React Native) 更好地使用条件渲染答案

【问题标题】：Better use of conditional render with SetState (React Native)使用 SetState (React Native) 更好地使用条件渲染
【发布时间】：2019-02-11 12:44:09
【问题描述】：

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

谢谢

【问题讨论】：

标签： reactjs react-native conditional render setstate

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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 或/和 props 计算所需数据，则应该这样做，而不是引入新的 prop 或 state 变量。

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

【讨论】：