Question

我的代码是从https://github.com/jeffersonRibeiro/react-shopping-cart编辑的。购物页面中有过滤功能。我尝试让过滤器选项在服务器中变为动态。这是我的代码：

const productsAPIL = "http://localhost:8001/api/products";

const brandArr = [];

const productdata=axios.get(productsAPIL)
.then(res => {
  let { products } = res.data;
  return res.data;

});

  productdata.then(function(result){ 
  result.products.map(function(value,index,array){
    if(!brandArr.includes(value.brand))
        brandArr.push(value.brand);
  });

})
const availableSizes = [
  'XS',
  'S',
  'M',
  'ML',
  'L',
  'XL',
  'XXL',
];

我遇到的问题是brandArr已经具有我想要的元素，但是它们一开始并没有显示在页面中。选择某些过滤器选项后，仅将其更新到页面。这是过滤器类。我不确定哪里出了问题。

class Filter extends Component {



  componentWillMount() { 
    this.selectedCheckboxes = new Set();
  }

  toggleCheckbox = (label) => {
    if (this.selectedCheckboxes.has(label)) {
      this.selectedCheckboxes.delete(label);
  } else {
  this.selectedCheckboxes.add(label);
}

this.props.updateFilters(Array.from(this.selectedCheckboxes));
  }

  createCheckbox = (label) => (

<Checkbox
    classes="filters-available-size"
    label={label}
    handleCheckboxChange={this.toggleCheckbox}
    key={label}
/>
  )

  createCheckboxes = (attri) => (
attri.map(this.createCheckbox),
attri.map(this.createCheckbox)
  )

  render() {


return (
<div>
  <div className="filters">
    <h4 className="title">Sizes:</h4>
    {this.createCheckboxes(availableSizes)}
    <StarButton />
  </div>

  <div className="filters">
    <h4 className="title">Free Shipping:</h4>
    {this.createCheckboxes(isFreeShippingLabel)}
    <StarButton />

  </div>

  <div className="filters">
    <h4 className="title">Free Shipping:</h4>
    {this.createCheckboxes(brandArr)}
    <StarButton />

  </div>

  </div>
);

} }

如何在render（）函数之前从服务器初始化数组？

0 个答案: