React TypeError: _this2.props.variations.find не является функцией
Не знаю, почему я получаю эту ошибку. Мне нужно перебрать варианты и найти идентификатор, содержащий переменные varid. Мне это кажется правильным, но, очевидно, это не так. Я уверен, что все здесь намного умнее меня, хотя, ха-ха, я все еще новичок во всем этом.
Эта функция должна позволить мне отфильтровать состояние, чтобы у меня были только необходимые данные и я мог отображать их на странице, а не состояние, содержащее все мои продукты 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.info(product);
console.info(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;
Трудно сказать, но, возможно, вы передаете props что-то, что не является списком, null или undefined в variations
Результат console.info (this.props.variations); дает мне все варианты всех трех моих продуктов. Итак, в основном я получаю массив из 9 элементов, на что я и надеялся. Но теперь, когда я выбираю конкретный продукт, я хотел бы отфильтровать это состояние только до вариаций для выбранного продукта.
Скорее всего это не массив. Докажите это, выйдя из системы - console.info(this.props.variations instanceof Array)
там написано array [9], разверните его, и вы увидите все варианты.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я также столкнулся с этой проблемой и методом проб и ошибок обнаружил, что это из-за копирования + вставки. Проверьте свой редуктор (-ы), чтобы убедиться, что вы не устанавливаете значение по умолчанию для объекта {} или другого типа вместо массива [].
В моем случае у меня было (кстати, это синтаксис 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(), вы получите сообщение об ошибке.
Это очень легко пропустить, потому что данные извлекаются так быстро, что вы не можете легко увидеть, когда данные относятся к неправильному типу. Просто убедитесь, что вы устанавливаете правильный тип по умолчанию! Надеюсь, это кому-то поможет!
что в результате
console.info(this.props.variations);