Javascript 向现有对象数组添加键/值对_Javascript_Reactjs_React Native

Javascript 向现有对象数组添加键/值对

javascript reactjs react-native

Javascript 向现有对象数组添加键/值对,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我有一个保存到userList useState中的对象数组，它由以下部分组成： [{ firstName: "blah" lastName: "blah2" } { firstName: "test" lastName: "test2" }] 我有一个useEffect，它调用一个函数并返回一个值。我想在userList中为每个用户存储一个新的键和值 useEffect(() => { userList.forEach((use

我有一个保存到userList useState中的对象数组，它由以下部分组成：

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

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

我有一个useEffect，它调用一个函数并返回一个值。我想在userList中为每个用户存储一个新的键和值

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]))
            })
        )
    }
}, [])

如果使用console.log进行操作，这是可以的，但不幸的是，我需要将数据呈现到页面上。。在我的报告中，我有：

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

返回(
{用户列表
.map（（用户，索引）=>(
{user.newKey}
)

user.newKey显示为空白，似乎用户根本没有更新。我如何才能使其实际更新并在渲染时读取值？

您不应该更改列表，应该使用useState存储列表，因此类似以下内容：

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

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

然后，当您想要更新时，执行以下操作：

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

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

希望这对您有所帮助

您不应该更改列表，您应该使用useState存储您的列表，例如：

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

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

然后，当您想要更新时，执行以下操作：

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

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

希望这有帮助

您正在修改

用户列表

，但没有调用

设置

函数，这意味着React将不知道如何使用更新的状态重新渲染

您不应该改变当前状态，而应该创建一个新数组，然后在进行更改后使用更新的数组调用

useState

返回的

set

函数

您的

returnNewValueForNewKeyFunction

看起来也是一个承诺/

async

，这意味着您的每个项目更改都在发生

async

。在更新状态之前，您需要将这些更改同步/等待所有更改，以便将状态更改为UI的单个更新

例如，将这两者结合在一起-如果您正在做：

const [userList, setUserList] = useState();

你可以做：

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();
}, [])

useffect（（）=>{
//因为无法将异步func直接与useffect一起使用-
//定义一个异步func来处理更新，并在useffect func中调用它
const updateUsers=async（）=>{
//为更新的状态创建一个新数组
常量updateUserList=[]；
//在线循环您的值，以便您可以等待结果使其同步
for（让index=0；index