如何更新对象内部的值并保留ReactJs中以前的键值对？

pprl5pva 于 2023-02-22 发布在 React

关注(0)|答案(2)|浏览(91)

我需要在本地存储器中存储所选择的等级，当用户点击按钮时，其中的值应当被存储在与问题ID相对应的对象等级中。

import React, { useState ,useEffect} from 'react'
import "./rating_button.css"



function Rating(props) {
 let initial={1:'',2:'',3:'',4:'',5:''}
  const [rate,setRate]=useState(initial)

  const handle=(i)=>{
  
        if(props.id===1)
        {setRate({ ...rate, 1:i })
       
        }
       else if(props.id===2)
        {
          setRate({ ...rate, 2:i })
        
        }
       else  if(props.id===3)
        {
          setRate({ ...rate, 3:i })
          
        }
       else if(props.id===4)
        {
          setRate({ ...rate, 4:i })
          
        }
        else
        {
          setRate({ ...rate, 2:i })
         
        }

       
  }
  
const user=props.user;

  useEffect(() => {
   
    localStorage.setItem(user, JSON.stringify(rate));
  },[]);



  const type=props.inputType;
  if(type==='text')
  {
    return (
      <>
      <textarea  value='' onChange={()=>handle(this.value)}/>
      </>
    )
  }
  return (
    
    <>
   {props.scale.map((i)=>{
    return(
      <button className='rbtn'  onClick={() => handle(i)}>{i}</button>
    )
   })}
   
    </>
  )
}

export default Rating

这段代码似乎不工作，我有时得到一个键值更新，但状态似乎不持久.我尝试存储值在按钮点击到速率对象为5不同的问题.

reactjs

来源：https://stackoverflow.com/questions/75499657/how-to-update-values-inside-an-object-and-retain-the-previous-key-value-pairs-in

2条答案

按热度按时间

68bkxrlz1#

可以使用spread操作符创建先前状态的副本，更新所需的键-值对，然后将状态设置为更新后的对象。

import React, { useState, useEffect } from 'react';
import './rating_button.css';

function Rating(props) {
  const [rate, setRate] = useState({ 1: '', 2: '', 3: '', 4: '', 5: '' });

  const handle = (i) => {
    setRate({ ...rate, [props.id]: i });
  };

  const user = props.user;

  useEffect(() => {
    localStorage.setItem(user, JSON.stringify(rate));
  }, [rate, user]);

  const type = props.inputType;
  if (type === 'text') {
    return (
      <>
        <textarea value='' onChange={() => handle(this.value)} />
      </>
    );
  }
  return (
    <>
      {props.scale.map((i) => {
        return (
          <button className='rbtn' onClick={() => handle(i)}>
            {i}
          </button>
        );
      })}
    </>
  );
}

export default Rating;

handle函数使用spread操作符创建费率状态的副本，更新与www.example.com值对应的键-值对props.id，然后将状态设置为updated对象。2 useEffect钩子现在依赖于rate和user变量，因此只要费率状态发生变化，它就会被触发。

赞(0）回复(0）举报 2023-02-22

83qze16e2#

你的useEffect只是第一次运行，当组件挂载，但没有随后更新，因为速率对象的状态改变后，每次重新渲染。这是因为空的依赖关系数组在useEffect，将其更改为：

useEffect(() => {
 localStorage.setItem(user, JSON.stringify(rate));
},[rate]);

赞(0）回复(0）举报 2023-02-22

我来回答

如何更新对象内部的值并保留ReactJs中以前的键值对？

2条答案

相关问题

热门标签

最新问答