遍历 i18next JSON 文件以映射类组件中的数据-解网

问：

我一直在尝试将代码从手动设置的数据重构为通过 JSON 文件进行映射，更具体地说是使用 i18next 进行翻译。

代码如下所示：

constructor(props) {
    super(props)
    var p1 = <Product
        img={ImageTruth}
        position={0}
        title={'title'}
        text={'text'}
        isBought={false}
        id={1}
        handleRemove={this.handleRemove}
    />
    var p2 = <Product
        img={ImageLies}
        position={3}
        title={'title'}
        text={text'}
        isBought={false}
        id={2}
        handleRemove={this.handleRemove}
    />
    var p3 = ...

    products.push (p1, p2, p3, p4, p5, p6)

    var selectedProduct = p1

    this.state = {
        products: products,
        selectedProduct: selectedProduct,
        bought: [],

        touchStartX: null,
        touchEndX: null,
        isOpen: false,
    }

这是我替换它的内容：

// pulling Object from translations
var products_t = t('pulsesInfos', { ns: 'cards', returnObjects: true })

if (Object.values(products_t)[0]['text'] !== undefined) {

    // mapping through translations array of Objects
    Object.values(products_t).map(productItem => {
        const img1 = require('../img/pulses/' + productItem.image)
        const product = (
            <Product
                img={img1}
                position={0}
                title={productItem.title}
                text={productItem.text}
                isBought={false}
                id={productItem.id}
                handleRemove={this.handleRemove}
            />
        )
        // adding to the array for render
        products.push(product)
        
        if( productItem.id == 1 ){
            this.state = { selectedProduct: product }
            // setting selectedProduct with currrent one in loop if id=1
        }
    })
}

    this.state = {
        products: products,
        selectedProduct: selectedProduct, // when leaving this line, right side argument shows undefined
        bought: [],

        touchStartX: null,
        touchEndX: null,
        isOpen: false,
    }

但是，它返回：'Failed to Compile' : selectedProduct is undefined.

对于上下文，有一些控件（左侧和右侧）允许用户更改所选产品并将其添加到购物车。

是范围错误吗？还是我错过了什么？谢谢。

javascript reactjs react-state react-i18next react-class-based-component（基于响应类的组件

// pulling Object from translations
var products_t = t('pulsesInfos', { ns: 'cards', returnObjects: true });

// Define the variables outside the loop
var products = [];
var selectedProduct = null; // Initialize with null

if (Object.values(products_t)[0]['text'] !== undefined) {
    // Mapping through translations array of Objects
    Object.values(products_t).map(productItem => {
        const img1 = require('../img/pulses/' + productItem.image);
        const product = (
            <Product
                img={img1}
                position={0}
                title={productItem.title}
                text={productItem.text}
                isBought={false}
                id={productItem.id}
                handleRemove={this.handleRemove}
            />
        );
        products.push(product);

        if (productItem.id === 1) {
            selectedProduct = product; // Set the selectedProduct variable
        }
    });
}

// Now define the state after the loop
this.state = {
    products: products,
    selectedProduct: selectedProduct,
    bought: [],
    touchStartX: null,
    touchEndX: null,
    isOpen: false,
};

在此代码中，我已将 products 数组和 selectedProduct 变量的定义移到了循环之外。这可确保在状态初始化中使用 selectedProduct 变量之前，已正确定义该变量。这应该可以解决您面临的“selectedProduct is undefined”问题。

遍历 i18next JSON 文件以映射类组件中的数据

Iterate through an i18next JSON file to map data in a Class Component

评论

评论