Странное поведение цикла в js (react)

Есть такой класс. Его предназначение - рендер каталога товаров, которые он получает из API через fetch().

    export class Store extends Component {
    constructor(props) {
        super(props);
        this.state = { isFetched: false, data: [] }
    }
    componentDidMount() {
        this.fetchData();
    }
    fetchData() {
        fetch('api/store/getstoredata').then(response => response.json()).then(result => this.setState({ data: result, isFetched: true }));
    }
    buildGood(x) {
        if (x <= this.state.data.length && this.state.isFetched === true) {
            console.log(`trying ${x}`);
            var item = this.state.data[x];
            console.log(`success at ${ x }`);
            return (<Col className="store_product_wh" key={'goods_' + x} md={4}>
                <div className="store_product_photo margin-auto store_round_top_corners store_product_wh text-center">
                    <img src={item.photoSource} alt={'goods_' + x} />
                </div>
                <div className="store_product_block margin-auto store_round_bottom_corners store_product_w">
                    <p className="store_product_title text-center"><b>{item.title}</b></p>
                    <p className="store_product_price text-center">{item.price}</p>
                </div>
            </Col>);
        }
        else {
            return null;
        }
    }
    render() {
        var goods = [];
        for (var i = 0; i < this.state.data.length; i += 3) {
            if (i >= this.state.data.length) { break;}
            goods.push(
                <Row>
                    {this.buildGood(i)}
                    {this.buildGood(i + 1)}
                    {this.buildGood(i + 2)}
                </Row>)
        }
        return (
            <React.Fragment>
                <Container className="store_fluid" fluid={true}>
                    <h2 className="store_h2 noselect text-center">Store</h2>
                </Container>
                <Container>
                    {goods}
                </Container>

            </React.Fragment>
        );
    }
}

Мне пришлось вынести рендеринг одной карточки товара в отдельный метод buildGood(), так как если просто рендерить пачку <Col md={4}></Col>, то ничего хорошего не выходит - получается, что один товар в ряду. Поэтому я выбираю их по три и отправляю в массив goods, закрывая в <Row></Row>

В data четыре объекта, переданы нормально, всё проверял. Странное поведение циклов заключается в том, что когда он доходит до 4, он проходит цикл еще раз от 0 до 4 и выдает ошибку: item is not defined

Специально для того, чтобы проверить это, проставил console.log() и вот результат из консоли:

trying 0 main.chunk.js:2727:15
success at 0 main.chunk.js:2729:15
trying 1 main.chunk.js:2727:15
success at 1 main.chunk.js:2729:15
trying 2 main.chunk.js:2727:15
success at 2 main.chunk.js:2729:15
trying 3 main.chunk.js:2727:15
success at 3 main.chunk.js:2729:15
trying 4 main.chunk.js:2727:15
success at 4 main.chunk.js:2729:15
trying 0 main.chunk.js:2727:15
success at 0 main.chunk.js:2729:15
trying 1 main.chunk.js:2727:15
success at 1 main.chunk.js:2729:15
trying 2 main.chunk.js:2727:15
success at 2 main.chunk.js:2729:15
trying 3 main.chunk.js:2727:15
success at 3 main.chunk.js:2729:15
trying 4 main.chunk.js:2727:15
success at 4