React从localStorage获取正确用户ID实现帖子发布的问题排查

需要获取users表中对应用户的ID实现用户发布帖子功能，目前代码可以从localStorage中读取到包含userid和token的用户数据，但无法正确提取出所需的userid字段传递给帖子发布接口，原有实现代码如下：

export default function Share() {
    const [publier, setPublier] = useState('')

    const handlePublier = (e) => {
        setPublier(e.target.value)
      }
    const register = () => {
        const posterId = localStorage.getItem('users')
        let objSo = JSON.parse(posterId)
        const poster = objSo.user
        axios.post('http://localhost:4200/api/post/',
         { posterId: posterId, message: publier }).then((response) =>{ console.log(response) })

    }


  return (
    <div className='share'>
        <div className="shareTop">
            <img className='shareProfilImg' src="/assets/person/1.jpeg" alt="" />
            <input placeholder='Que veux-tu publier ?' className='shareInput' onChange={handlePublier} />
        </div>
        <hr className='shareHr'/>
        <div className="shareBottom">
            <div className="shareOptions">
                <div className="shareOption">
                    <PermMedia htmlColor='tomato' className='shareIcon' />
                    <span className='shareOptionText'>Photo ou Vidèo</span>
                </div>
                <button className='shareButton' onClick={register}>Publier</button>
            </div>
        </div>
    </div>
  )
}

代码错误点很明确：
你从localStorage取出的posterId是原始JSON字符串，虽然做了JSON.parse把解析结果存在objSo里，甚至还取了objSo.user存到poster变量，但最后传给接口的还是最开始那个没解析的字符串，根本没从解析后的对象里提取真正的userid字段。

先确认localStorage里users字段的实际存储结构，常见结构分两种，对应调整取值逻辑即可：

• 如果存储结构是{user: {userid: xxx, token: xxx}}，从解析后对象的user属性下取userid
• 如果存储结构是{userid: xxx, token: xxx}，直接从解析后的根对象取userid

修复后的register方法代码如下：

const register = () => {
    // 读取本地存储的用户原始字符串
    const userStorageStr = localStorage.getItem('users')
    // 加兜底判断，避免本地无数据时JSON.parse报错
    if (!userStorageStr) {
        console.error('本地未读取到登录用户信息，请先登录')
        return
    }
    const userData = JSON.parse(userStorageStr)
    // 根据你实际的存储结构二选一注释掉不用的行即可
    // 结构1：用户信息存在user字段下用这行
    const finalPosterId = userData.user.userid
    // 结构2：userid直接在存储根层级用这行
    // const finalPosterId = userData.userid

    axios.post('http://localhost:4200/api/post/',
        { posterId: finalPosterId, message: publier })
        .then((response) => {
            console.log('发布成功', response)
        })
        .catch(err => {
            console.error('发布失败', err)
        })
}

• 变量命名尽量语义化，不要把原始存储字符串、解析后对象、最终要传的userid都用相近的名字，很容易出现传错值的低级错误
• 接口请求记得加错误捕获，发布失败时可以快速定位问题
• 涉及本地存储读取的逻辑一定要做空值兜底，避免用户登录态过期、本地缓存被清空时页面直接报错崩溃

内容的提问来源于stack exchange，提问作者Tewho