不确定为什么会出现此错误。我需要遍历各种变化并找到包含varid变量的ID。对我来说,这看起来不错,但显然不是。我敢肯定,尽管哈哈,这里的每个人都比我聪明得多,在这一切上我仍然是一个新手。
该功能应该允许我过滤状态,以便我只有所需的数据,并且可以在页面内显示该数据,而不是包含我所有drupal产品的状态。我不确定,也许还有一种更有效的方法可以做到这一点。
代码如下:
class ProductPage extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}));
}
render() {
let style = {
height: this.props.height - 56,
};
let product = this.props.products.items.find(o => o.path[0].alias === this.props.router.match.url);
console.log(product);
console.log(this.props.variations);
let variationList = [];
if (product && this.props.variations) {
for (let i = 0; i < product.variations.length; i++) {
let varid = product.variations[i].variation_id;
let variation = this.props.variations.find(o => o.path[0].alias === varid);
variationList.push(variation);
}
}
let body = product && product.body.length ? product.body[0].value : null;
return (
<div className="App" id="default">
<div className='MenuBar'>
<MenuBar/>
</div>
<div>
<div style={style} className="ProductPage row no-gutters">
<div className="col-xs-3 col-md-3">
<LeftMenuBar/>
</div>
<div className="outer col-xs-4 col-md-4">
<div>
<div id="ProductPlacement">
<img src={WomensWear} alt=""/>
<div id="alternate-pics">
<div id="alt-pic">
</div>
<div id="alt-pic">
</div>
<div id="alt-pic">
</div>
</div>
</div>
</div>
</div>
<div className="col-xs-5 col-md-5">
<div id="ImagePlacement">
<div className="ProductTitle">
<h1>First Product</h1>
</div>
<hr/>
<div className="ProductDescription">
<div dangerouslySetInnerHTML={{__html: body}} />
</div>
<div id="options">
<div id="color">
</div>
<div id="color2">
</div>
<div id="color3">
</div>
</div>
<div id="options">
<div>
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret id="size-dropdown">
Size
</DropdownToggle>
<DropdownMenu>
<DropdownItem>1</DropdownItem>
<DropdownItem>3</DropdownItem>
<DropdownItem>5</DropdownItem>
</DropdownMenu>
</Dropdown>
<div className="AddToCart">
<button className="AddToCart">Add To Cart</button>
<button className="Price">$34.99</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ProductPage;
答案 0 :(得分:0)
我也遇到了这个问题,经过反复试验发现这是由于复制粘贴所致。检查您的reducer以确保未设置对象{}
或其他类型的默认值,而不是数组[]
的默认值。
就我而言(顺便说一下,这是ES6语法):
const someReducer = (state = {}, action) => {
switch (action.type) {
case 'reducer type':
// get the data etc.
return [];
default:
return state;
}
};
我应该有的时间:
const someReducer = (state = [], action) => {
switch (action.type) {
case 'reducer type':
// get the data etc.
return [];
default:
return state;
}
};
请注意在第一行设置默认值。在api调用处于暂挂状态时使用此代码,因此如果恰好发生到达使用.find()
的代码,则会出现错误。
这非常容易遗漏,因为数据检索速度如此之快,以至于当数据类型错误时,您将不容易看到。只需确保您的默认值(无论您如何设置)都是正确的类型即可!希望能帮助到某人!