javascript - React TypeError:_this2.props.variations.find 不是函数
问题描述
不知道为什么我会收到这个错误。我需要遍历变体并找到包含可变变量的 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;
解决方案
我也遇到了这个问题,通过反复试验发现这是因为复制+粘贴。检查您的减速器以确保您没有设置对象{}
或其他类型的默认值,而不是数组[]
。
就我而言,我有(顺便说一下,这是 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()
正在使用的代码,那么您将收到错误。
这很容易被忽略,因为数据检索得如此之快,以至于您无法轻易看到数据何时是错误类型。只需确保您的默认值(无论您如何设置它)都是正确的类型!希望对某人有所帮助!
推荐阅读
- sql - 如何插入 BLOB 值
- android - 带有 FragmentStatePagerAdapter 的 ViewPager 不断重新创建已删除的片段
- excel - 包含决策表的电子表格的版本控制
- python - 似乎无法制作刷新按钮来刷新 python 中的 API 调用
- python - Python:循环和组合嵌套字典中的值
- reactjs - TS2339:类型“{}”上不存在属性 X
- php - 如何从同一个 php 文件中发布和获取数据 [PHP]
- python - 使用for循环在keras中实现时间相关的神经网络
- image - 我需要创建一个看起来像这样的网站
- angular - 您如何指定要销毁的数据表?