Saya memiliki array objek yang disimpan ke dalam useState userList yang terdiri dari:

[{
    firstName: "blah" 
    lastName: "blah2"
 }

 {
    firstName: "test"
    lastName: "test2"
}]

Saya memiliki useEffect yang memanggil fungsi dan mengembalikan nilai. Saya ingin menyimpan kunci dan nilai baru untuk setiap pengguna di daftar pengguna.

useEffect(() => {

        userList.forEach((user, index) =>
            returnNewValueForNewKeyFunction(user, index).then(newValue => {

                userList[index]['newKey'] = newValue
                //this console.log shows new field and value
                console.log(userList)
                //this console.log ALSO shows new field and value
                console.log(JSON.stringify(contactList[index]))
            })
        )
    }
}, [])

Ini baik-baik saja jika saya beroperasi dari console.log, tetapi sayangnya saya perlu merender data ke halaman .. dalam render saya, saya memiliki:

return (
    <TableBody>
        {userList
            .map((user, index) => (
                 <TableRow>
                     <TableCell>
                         {user.newKey}
                     </TableCell>
)

User.newKey ditampilkan sebagai kosong dan sepertinya pengguna tidak diperbarui sama sekali. Bagaimana saya bisa membuatnya sehingga nilainya benar-benar diperbarui dan dapat dibaca saat rendering?

0
reef 23 Januari 2020, 20:36

2 jawaban

Jawaban Terbaik

Anda tidak boleh mengubah daftar Anda, Anda harus menggunakan useState untuk menyimpan daftar Anda, jadi kira-kira seperti ini:

const [ state, setState] = useState(userList);

Kemudian ketika Anda ingin memperbarui, lakukan sesuatu seperti ini:

const listCopy = [...state];
//Logic to update your list here
listCopy[index][otherindex] = Value;
setState(listCopy)

Semoga ini membantu

2
Morphex 23 Januari 2020, 17:47

Anda memodifikasi userList Anda tetapi tidak memanggil fungsi set Anda yang berarti React tidak akan tahu untuk merender ulang dengan status yang diperbarui.

Alih-alih mengubah status saat ini, Anda harus membuat larik baru dan kemudian memanggil fungsi set yang dikembalikan oleh useState dengan larik yang diperbarui setelah membuat perubahan.

Sepertinya returnNewValueForNewKeyFunction Anda juga merupakan janji / async yang berarti setiap perubahan item Anda terjadi async. Anda harus membuat ini sinkron/menunggu semuanya sebelum memperbarui status Anda untuk membuat status Anda mengubah satu pembaruan untuk UI.

E.g., menyatukan keduanya - jika Anda melakukan:

const [userList, setUserList] = useState();

Anda dapat melakukan:

useEffect(() => {
    // Since can't use an async func directly with useEffect -
    // define an async func to handle your updates and call it within the useEffect func
    const updateUsers = async () => {
        // Create a new array for your updated state
        const updatedUserList = [];

        // Loop over your values inline so your can await results to make them sync
        for (let index = 0; index < userList.length; index ++) {
            const user = userList[index];
            const newVal = await returnNewValueForNewKeyFunction(user, index);

            // Create a shallow copy of the original value and add the newValue
            updatedUserList[index] = { ...user, newKey: newValue };
            // ... Any other logic you need
        }

        // Call set with the updated value so React knows to re-render
        setUserList(updatedUserList);
    };

    // Trigger your async update
    updateUsers();
}, [])
0
smashed-potatoes 23 Januari 2020, 18:04