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

从您的代码中，您似乎是在从道具而不是状态中获取selectAdress的信息：

const selectAdress = propsObj.selectAdress;

您应该尝试将其更改为使用它：

const { selectAdress } = this.state;

旁注：地址应拼写为2 d。您已在其他变量（例如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}。

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

3 个答案: