如何在反应中更新地图功能中的状态

Question

I have an object in a state, update all values under map Function

const [docUrls, setDocUrls] = useState({ imageUrl: "",  panUrl: "", statementUrl: "" })

data.map(item=>
 item.type==='image' ?
setDocUrls({ ...docUrls, imageUrl:item.url })

:item.type==='panUrl' ?
setDocUrls({ ...docUrls, panUrl:item.url  })

:item.type==='statement' ?
setDocUrls({ ...docUrls, statementUrl: item.url})

)

Answer 1

data.forEach(item=>
 item.type==='image' ? docUrls.imageUrl = item.url

:item.type==='panUrl' ?docUrls.panUrl = item.url

:item.type==='statement' ? docUrls.statementUrl = item.url

)
setDocUrls(docUrls)

Answer 2

Method 1

const [docUrls, setDocUrls] = useState({ imageUrl: "",  panUrl: "", statementUrl: "" })
const keyMap = {
    image: 'imageUrl',
    panUrl: 'panUrl',
    statement: 'statementUrl',
}

const handleUpdateState = (key, value) => {
    setDocUrls((old) => ({ ...old, [key]: value }));
};

data.forEach(item=>{
    handleUpdateState(keyMap[item.type], item.url)
})

Method 2

const [docUrls, setDocUrls] = useState({ imageUrl: '', panUrl: '', statementUrl: '' });
const keyMap = {
    image: 'imageUrl',
    panUrl: 'panUrl',
    statement: 'statementUrl',
};

const handleUpdateState = () => {
    const result = {};
    data.forEach((i) => {
        result[keyMap[i.type]] = i.url;
    });
    setDocUrls(old => ({...old, ...result}));
};