如何在 for 循環中更新本機 useState 中的對象數組？

Question

我有一個包含對象數組的 state，我想在 for 循環中更新我的 object。 這是我的代碼：每個對象都包含值、文本和時間。 時間應該在 for 循環內更新。

const [initialValues, setInitialValue] = useState([
        {
            value: 128,
            text: '128 Kb',
            time: ''
        },
        {
            value: 256,
            text: '256 Kb',
            time: ''
        },
        {
            value: 512,
            text: '512 Kb',
            time: ''
        },
        {
            value: 750,
            text: '750 Kb',
            time: ''
        },
        {
            value: 1024,
            text: '1 MB',
            time: ''
        },
        {
            value: 2048,
            text: '2 MB',
            time: ''
        },
        {
            value: 3072,
            text: '3 MB',
            time: ''
        },
        {
            value: 4096,
            text: '4 MB',
            time: ''
        },
        {
            value: 5120,
            text: '5 MB',
            time: ''
        }
    ]);

我想更新我的 state 的 for 循環：計算是一個 function，它將在用戶端的onPress事件上被調用。

const [number, setNumber] = useState('1')
const [data, setData] = useState('1024')
const calculate = () => {
        if (number) {

            let size = number * data * 8
            size = percentage(12, size) + size;

            for (let value of initialValues) {
                let data = value.value;
                data = (size / data).toFixed();
                // here is my approach but not correct
                setInitialValue({ ...initialValues, time: data })

            }
        }
    }

但結果是不確定的。

Answer 1

你應該改變你的計算 function 到這個

const calculate = () => {
if (number) {
    let size = number * data * 8;
    size = percentage(12, size) + size;
    const newValues = [...initialValues.slice()];

    for (let i = 0; i < newValues.length; i++) {
        let data = (size / data).toFixed();
        newValues[i].time = data;
    }

    setInitialValue(newValues);
}
}

Answer 2

將初始值存儲在變量中並像這樣將其傳遞給 useState

const [initialValues, setInitialValue] = useState(initialVaule);
const [number, setNumber] = useState(1)
const [data, setData] = useState(1024)

const calculate = () => {
        if (number && data) {

            let size = number * data * 8
            size = percentage(12, size) + size;

           let updatedValue = intialValues.map( item => {
              return item.time = (size / data).toFixed();
           })
           setInitialValue(updatedValue);
        }
    }