如何使用React Native中的React.useState更改FlatList中的复选框状态

Question

这里我想更改复选框状态。单击复选框后，未显示任何更改。但是在CTR+S中的VS Code之后，data被更新。

const [data,setData] = React.useState();
React.useEffect(() => {
  DB.select("tasks","*").then(res=>{
    return setData(res);
  });
}, [100])

const complete = (index,id)=>{
    data.forEach((x,k)=>{
        if(k == index){
            x.status = !x.status;
            alert(x.name);
            DB.update("tasks",["status"],[x.status],'id=?',[x.id]).then(r=>{
                console.log(r);
            });
            setData(data);
        }
    });
}

<FlatList
    style={css.list}
    data={data}
    extraData={data}

    renderItem={({ item,index }) => 
        <View style={css.item}>
            <View style={css.textItem}>
                <Text>{item.name}</Text>
                <Checkbox
                    status={item.status ? 'checked': 'unchecked'} 
                    onPress={e=>complete(index,id) }
                />

            </View>

            <View style={css.chip}><Text style={{alignItems: 'center',color: "#009386"}}>Category #1</Text></View>

        </View>}
keyExtractor={data => data.id}
/>

Answer 1

您正在设置与状态相同的数据。因此它不会更新。

另外

进行定向是非常糟糕的做法；请对状态变量进行更改，使之在complete函数中执行。使用map instead of forEach。

如下更新您的完整功能：

const complete = (index, id) => {
    const updatedData = data.map((x, k) => {
        x.status = x.status ? 0 : 1;
        DB.update("tasks", ["status"], [x.status], 'id=?', [x.id]).then(r => {
            console.log(r);
        });
        return x;
    });
    setData(updatedData);
}

正如您已经告知状态包含数字0/1一样，我正在用0和1更新支票的状态，这与您要保存布尔值不同。我在TS中编码，所以我总是知道类型：）