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

【问题标题】：react-native: Updating an element in the setstate array does not re-render the componentreact-native：更新 setstate 数组中的元素不会重新渲染组件
【发布时间】：2018-09-11 01:46:56
【问题描述】：

我正在尝试更新 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)} />

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

【问题讨论】：

您能否也提供您的render() 代码，以便我们查看您正在调用的模板语法？
更新了渲染代码。
将<View style={styles.container}> 更新为<View style={styles.container} key={index}>
试过了。但重新渲染没有发生。子组件的 console.log 不打印，这告诉我在我更改状态后它不会再次呈现。

标签： javascript reactjs react-native

【解决方案1】：

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

const selectAdress = propsObj.selectAdress;

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

const { selectAdress } = this.state;

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

【讨论】：

感谢您的回复。我将 selectAdress 作为道具传递给子组件。如果您在父组件中看到 render 方法，我也是这样做的。感谢旁注。会这样做。
传下来的道具会更新吗？您验证了状态更新但不一定是道具。
谢谢。我发现真正的问题在于 FlatList。我使用 extradata 属性解决了我的问题。

【解决方案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)} />

【讨论】：

【解决方案3】：

由于selectAdress 不属于data (addresses)，您需要添加extraData={propsObj.selectAdress}。

【讨论】：