Question

我正在根据特定的值呈现产品列表。我正在使用Picker Component进行渲染，当它与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

最简单的方法是创建一个用于设置状态并仅在自定义方法中传递参数的自定义对象，除了使用三元方法会有所帮助：

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 2

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

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

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

反应文档建议，如果您可以根据状态或/和道具计算所需的数据，则应该这样做，而不是引入新的道具或状态变量。

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

使用SetState（React Native）更好地使用条件渲染

3 个答案: