react-native：更新setstate数组中的元素不会重新呈现组件

Question

我试图更新setstate中的数组，并希望根据更新呈现子组件。

初始状态：

state={selectAdress: []};

componentDidMount：

const selectAdress = [];
    if (addresses.length > 0) {
        for (i = 0; i < addresses.length; i++) {
            selectAdress.push(false);
        }
        this.setState({ selectAdress: selectAdress });
    }

方法：

const selectAdress = this.state.selectAdress.slice();

        for (i = 0; i < selectAdress.length; i++) {
            if (i === index) {
                selectAdress[index] = !this.state.selectAdress[index];
            }
            else {
                selectAdress[i] = false;
            }
        }
        this.setState({ selectAdress: selectAdress }, () => {
            console.log(this.state, '787878787878778787')
           });

在主要组件中呈现代码：

render() {
        const { selectAdress } = this.state
        console.log(this.state);
        return (
            <AddressComponent
                updateAddressCheckbox={this.updateAddressCheckbox}
                onChangeText={this.onChangeText}
                selectAdress={selectAdress} />
        );
    }

在子组件中呈现代码：

const selectAdress = propsObj.selectAdress;

    return (
            <View style={{ height: SCREEN_HEIGHT - 85 }}>
                <FlatList
                    data={addresses}
                    keyExtractor={(x,i) => i.toString()}
                    renderItem={({ item, index }) => <View style={styles.container}>
                        <CheckBox
                            title={null}
                            checkedIcon='check-square-o'
                            uncheckedIcon='square-o'
                            checked={selectAdress[index]}
                            onPress={() => propsObj.updateAddressCheckbox(index)} />

我从堆栈溢出中尝试了很多答案。但是没有什么可以让我重新渲染组件。但是，如果我检查日志，状态显然会更新。有人可以帮助我解决我在这里做错了什么吗？

Answer 1

从您的代码中，您似乎从props而不是state中提取selectAdress的信息：

const selectAdress = propsObj.selectAdress;

您应该尝试更改它以使用它：

const { selectAdress } = this.state;

附注：地址应拼写为2 d's。您在其他变量（例如updateAddressCheckbox）中正确执行了此操作，因此您应将其更新为selectAddress以保持一致性。

Answer 2

通过添加FlatList的extraData属性，我能够解决问题。

return (
            <View style={{ height: SCREEN_HEIGHT - 85 }}>
                <FlatList
                    extraData={propsObj}
                    data={addresses}
                    keyExtractor={(x,i) => i.toString()}
                    renderItem={({ item, index }) => <View style={styles.container}>
                        <CheckBox
                            title={null}
                            checkedIcon='check-square-o'
                            uncheckedIcon='square-o'
                            checked={selectAdress[index]}
                            onPress={() => propsObj.updateAddressCheckbox(index)} />

Answer 3

由于selectAdress不是data（addresses）的一部分，你需要添加extraData={propsObj.selectAdress}。