如何使用钩子从地图中获取索引？

Question

我在我的代码中使用路由器和钩子， 所以我有2个组件 “添加房间” “主屏幕” 在应用程序内部，我有 addroom() 箭头函数，以及名为“rooms”的钩子，它被发送到“AddRoom”组件，如下所示：

      <Router>
      <Switch>
       <Route exact path='/' component={() => { returnn <HomeScreen rooms={rooms} /> }} /> 
      <Route exact path='/AddRoom' component={() => { return <AddRoom add={addRoom} rooms={rooms} /> }} /
       </Switch>
      </Router>

“添加房间”功能：

      const [rooms, setRooms] = useState([]);

      const addRoom = (room, name, color) => {
    //I have tried to use here map to add index for array "rooms" it is not working//
        setRooms([...rooms, { room: room, name: name, color: color ,index:{index}}])}

每次我将房间添加到“房间”数组时，我都会尝试获取索引，但它不会将它添加到我的数组中，我不明白为什么，我该怎么做？

那就是“AddRoom”组件：

    import React, { Component, useState } from
    'react'
    import context from 'react- 
    bootstrappp/esm/AccordionContext';
    import { render } from 'react-dom';
    import { useHistory } from "react-router- 
    dom";

    export default function AddRoom(props) {

    const [room, setRoom] = useState()
    const [name, setName] = useState()
    const [color, setColor] = useState('black')
    const [showError, setShowError] = useState(false)
    const [index, setIndex] = useState([]);
    const history = useHistory();


    const validInput = () => {//input validation
        if ((name == null) || ((room == 'Choose') || (room == null))) {//no name typed and no room chosen
            debugger
            window.alert('Please choose a room and enter at least one character in room name');
            return true;//if alert pops up
        }
        else {
            if (name.length > 5) {
                return false;//name is too long
            }
        }

    }

    const AddClick = () => {
        let result = validInput();
        let path = '/';
        if (result == true)//no name was typed and room was not selected
        {
            debugger
            history.push(path);
        }
        else {
            if (name.length > 5) {//name is too long
                setShowError(true)
            }
            else//all fields are correct, go back to home screen with ner room
            {
                setShowError(false)
                /*  {props.rooms.map((element, i) => { */
                props.add(room , name , color /*(setIndex(...index, { index: i })) */);
            }
            )} 
            history.push(path);
        }
    }








    return (
        <div className='container' >
            <div className='row'>
                <div className='col-sm-12 text-center' style={{ textAlign: 'center', position: "relative", top: "80px", }}>

                    <select onChange={(element) => { setRoom(element.target.value) }} name="room" id="room">
                        <option value="Choose">Choose your room</option>
                        <option value="Livingroom">Livingroom</option>
                        <option value="Kitchen">Kitchen</option>
                        <option value="Bedroom">Bedroom</option>
                        <option value="Bathroom">Bathroom</option>
                    </select>
                    <br /><br />
                    <input onChange={(element) => { setName(element.target.value) }} id="name" type="text" placeholder="Room Name"></input>
                    <div style={{ color: 'red', marginTop: '5', display: showError ? "block" : "none" }}>Room Name Is More Then 5 Character</div>
                    <br /><br />
                    <input onChange={(element) => { setColor(element.target.value) }} id="color" type="color" placeholder="Room Color"></input>
                    <br /><br />
                    <button onClick={AddClick}>Create Room</button>

                </div></div></div>
    )
}

在调用 addRoom 函数之前：

rooms=[{}]

调用函数addRoom后：

rooms=[{room:"Kitchen",name:"Kit",color:"red",index:0},{room:"Bathroom",name:"Bat",color:"green",index:1}...]

Answer 1

如果我正确理解了您的问题，您正在尝试 map 您的房间数组，并且您想要数组中每个房间的索引。

如果您只想在map-ing 数组时获取房间的索引，您可以向map 函数提供第二个参数，该函数会将索引传递给它。

rooms.map((room, index) => {
    // Do stuff...
});

实际上将索引存储在对象中是一种反模式，因为您无法保证存储的索引实际上与其在数组中的索引匹配。每当您添加或删除一个房间时，您都必须使用它们的新索引更新所有房间。另外，除非您在数组之外存储对所有这些房间的引用，否则您必须先拥有索引才能访问房间。

但如果这仍然是您想要做的，您可以：

1. 在添加房间时存储索引

// Room is being added at the end, so its index must be rooms.length
setRooms([...rooms, { ...room, index: rooms.length }]);

1. 每次添加后更新索引

// This is basically the first part of my answer with extra steps
setRooms([...rooms, room].map((room, index) => ({ ...room, index: index })));