React TypeError: _this2.props.variations.find is not a function

Question

不确定为什么会出现此错误。我需要遍历变体并找到包含 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">.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() 的代码，那么您将收到错误。

这非常容易被遗漏，因为数据的检索速度如此之快，以至于您无法轻易看出数据的类型是否错误。只需确保您的默认值（无论您如何设置）是正确的类型！希望对某人有所帮助！

React TypeError: _this2.props.variations.find is not a function

React TypeError: _this2.props.variations.find is not a function

javascript

drupal

reactjs

redux