Question

我正在尝试将对象数组绑定到SelectionList，它似乎是绑定的，但是它将每个字符呈现为单独的列表项而不是单个项。

这是我的代码：

r：GetRecipesResponse是我随后将其转换为数组的对象列表，这在上面的左侧可见，在右侧的渲染问题很明显。

interface States {
    response: GetRecipesResponse;
    globalItems: any[];
    isModalVisible: boolean;
    selectedItem: any;
    selectedItemUnit: any;
}

export class MatrixScreen extends BaseNetworkScreen<GetRecipesResponse, Props, States> {

    itemWidth: number = 100;
    itemMargin: number = 3;
    selectedItemsArray: any[];

    constructor(props: Props) {
        super(props);

        this.selectedItemsArray = [];

        this.state = {
            isLoading: false,
            response: null,
            globalItems: this.selectedItemsArray,
            isModalVisible: false,
            selectedItem: null,
            selectedItemUnit: null
        };
    }
}

renderSelectLists(r: GetRecipesResponse): any {

    var arr = [];
    for (var key in r.data.recipe) {
      arr.push(r.data.recipe[key].name);
    }

    let sections = []
    for (const key in this.state.globalItems) {
        if (this.state.globalItems.hasOwnProperty(key)) {
            sections.push({
                data: this.state.globalItems[key],
                key: key,
                unit: this.state.selectedItemUnit
            })
        }
    }

    return (
        <View style={{ flex: 1, flexDirection: 'row' }}>
            <View style={styles.addContainer}>

                <Text>Press To Add Item</Text>

                <SectionList

                    sections={[{ data: arr }]}
                    renderItem={({ item }) => <Text style={styles.SectionListItemS} onPress={this.loadMatrixModal.bind(this, item)}> {item} </Text>}
                    keyExtractor={(item, index: any) => index}
                />
            </View>
            <View style={styles.removeContainer}>
                <Text>Press To Remove Item</Text>
                <SectionList
                    sections={sections}
                    renderItem={({ item, index }) => <Text style={styles.SectionListItemS} onPress={this.removeSectionListItem.bind(this, index)}> {item} </Text>}
                    keyExtractor={(item, index: any) => item}
                />
            </View>
        </View>
    );
}

在定义了“节”之后将其注销到控制台将返回以下内容：

更新：

如果我添加renderItem={({ item, index }) => <Text style={styles.SectionListItemS} onPress={this.removeSectionListItem.bind(this, index)}> {console.log(item)} {item} </Text>}

有趣的是，它将以下内容输出到控制台

Answer 1

您没有呈现所需的属性。

您需要访问每个data的{{1}}属性。

因此您需要更改：

item

对此：

renderItem={({ item }) => <Text style={styles.SectionListItemS} onPress={this.loadMatrixModal.bind(this, item)}> {item} </Text>}

请注意，我是如何将renderItem={({ item }) => <Text style={styles.SectionListItemS} onPress={this.loadMatrixModal.bind(this, item)}> {item.data} </Text>}更改为{ item }的，这是因为{ item.data }拥有整个item对象，并且您要呈现item属性。

Answer 2

所以我必须像这样构建我的对象：

var data = {name: item, qty: unit};
var builtObject = {data: [data]};

然后我可以将对象推送到数组，并将globalItems的状态设置为数组。

React Native SectionList渲染不正确

2 个答案: