React TypeError: _this2.props.variations.find не является функцией

Question

Не уверен, почему я получаю эту ошибку. Мне нужно перебрать варианты и найти идентификаторы, содержащие переменные переменные. Для меня это выглядит правильно, но это явно не так. Я уверен, что все здесь намного умнее меня, хотя, ха-ха, я все еще новичок во всем этом.

Эта функция должна позволять мне фильтровать состояние, чтобы у меня были только необходимые данные, и отображать их на странице, а не состояние, содержащее все мои продукты 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;

Answer 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(), то вы получите ошибку.

Это очень легко пропустить, потому что данные извлекаются так быстро, что вы не можете легко увидеть, когда данные имеют неправильный тип. Просто убедитесь, что по умолчанию, как бы вы его ни устанавливали, был правильный тип! Надеюсь, это кому-нибудь поможет!