我在反应阵列上使用 map function 时遇到了一些问题

Question

I'm reciving an array through props for my component and then store in a state using useEffect.

const Modules = ({moduleData}) => {

  const [userShowed, setUserShowed] = useState(0);
  const [modules, setModules] = useState([])

  const setUser = (id) => {
    setUserShowed(id);
  }

  useEffect(()=>{
    setModules(Object.values(moduleData).at(userShowed));
  },[moduleData, userShowed])

  return (
    <div>
      <div className="header-container">
        {Object.keys(moduleData).map((element, index) => {
          return <Button clickFunc={() => setUser(index)} btnKey={index} classButton={userShowed === index ? "btn-module is-active":"btn-module"} text={"Module " + (index+1)} />
        })}
      </div>
      <div className="users-container">
        <h4>Number of users in module {userShowed+1}:</h4>
        <div>
          <ul>
            {Object.values(moduleData).at(userShowed).map((element, index) => {
              return <User userKey={index} name={element}/>
            })}
          </ul>
        </div>
      </div>
      <div className="btn-container">
        <Button classButton="btn-users btn-delete" btnKey="delete-btn" text="Delete" icon={<BsFillTrashFill />}/>
        <Button classButton="btn-users btn-advice" btnKey="advice-btn" text="Advice" icon={<IoBulbOutline />} />
        <Button classButton="btn-users btn-create" btnKey="crate-btn" icon={<IoMdAddCircleOutline />} text="Create" iconBefore={true}/>
        <Button classButton="btn-users btn-submit" btnKey="submit-btn" text="Submit" icon={<MdOutlineArrowForwardIos />} />
      </div>
    </div>
  )
}

Then i'm trying to iterate over this array but most of the time a recive this kind of error. It's strange because when i take off this map function and i check the component props the array is there(so it's not undefined)

This is the error

Modules.js:34 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at Modules (Modules.js:34:1)

photo of the component hook without map

Thanks for the help

Answer 1

Object.values(moduleData).at(index) just returns an item so it is not an array. If you want to return and map just moduleData values remove the at()