如何使用useState将数组修改为React中的常量

Question

我在一个名为room的常量中有一个数组对象值。

room = [
{name: "buger", placeId: 252}
{name: "pack", placeId: 253}
{name: "apple", placeId: 254}
{name: "peach", placeId: 255}
]

此时，每当我在TextInput中写入字符时，我想通过使用onChangeroom函数来更改房间中name的值。

因此，当我在onChangeRoom函数中运行setRoom并附加["name"]时，会出现一个Unexpected Token错误。

如何更改代码以更改房间名称？

下面是我的代码。

const [room, setRoom] = useState(
targetFarm.children.map((v) => ({ name: v.name, placeId: v.placeId }))
)

const onChangeroom = useCallback((index) => (text) => {
setRoom({ ...room, [index]["name"]: text });      // << this might cause error
}, []);

{targetFarm.children.map((item, index) => {
return (
<TextInput
style={{ backgroundColor: 'orange' }}
value={room[index]["name"]}
onChangeText={onChangeroom(index)}
/>
...
)
}

Answer 1

您可以在map函数中获取index。获得索引后，就可以进行更新。

让我举一个例子：

const [room, setRoom] = useState([
...targetFarm.children
]);
const onChangeroom = useCallback((index, text) => {

setRoom(room.map((pr, i) => {
if(i === index) {
return {
...pr,        
name: text
}
}
else return pr;
}))
}, []);

Answer 2

尝试将index和text都传递给onChangeRoom(text, index)并将useCallback钩子修改为这样(请注意，这两个参数都传递给钩子内的第二个函数(：

const onChangeroom = useCallback(() => (text, index) => {
setRoom({ ...room, [index]["name"]: text });
}, []);

让我知道这对你有用。