状态更改后反应组件不会重新渲染

Question

export default function RenderPages({storage, setStorage, state, setState}){
  const [pageNum, setPageNum]= useState(0)

  const currentFileId=state.currentFileId
  const currentFolderId= state.currentFolderId

  return (
    <div className="writing">
      {storage[currentFolderId][currentFileId].content.map((page, index)=>
      <div className='textarea'>
        <textarea placeholder='write here' defaultValue={page} id={index} onChange={(e)=>onChange(e, index)} rows={rows} cols={cols}></textarea>
      </div>)}
    </div>
  )
}

I expected that jsx would return renewal result after the state is changed, but it didn't. I checked that currentFileId and currentFolderId value were changed. why this happen?

Answer 1

You should make sure you are not just mutating the state prop.

A new reference should be created for react to know the state prop changed, if you just mutate state it is still the same reference despite some of its properties changed.

As an alternative, you could pass the values you are changing instead of the whole object:

export default function RenderPages({storage, setStorage, currentFileId, currentFolderId}){
  const [pageNum, setPageNum]= useState(0)

  return (
    <div className="writing">
      {storage[currentFolderId][currentFileId].content.map((page, index)=>
      <div className='textarea'>
        <textarea placeholder='write here' defaultValue={page} id={index} onChange={(e)=>onChange(e, index)} rows={rows} cols={cols}></textarea>
      </div>)}
    </div>
  )
}

Answer 2

it could be that the error is here where you need to return strings with the value of the key inside the literal object, if you can show the state it would help too.

let storage = {
     currentFolder:{
        id:12313,
        file:{
          id:1231  
        }
     }
 }


storage['currentFolder']['id'] // output = 12313