如何将数组从localStorage映射到reactJS中的表？

Posted 2023-03-23

【中文标题】如何将数组从localStorage映射到reactJS中的表？

【英文标题】：How to map array from localStorage to table in reactJS?

【发布时间】：2021-12-05 13:50:45

【问题描述】：

我正在尝试将数组数据从 localStorage 映射到我的反应表，但格式如下所示：

但我希望它的格式如下：

我现在使用的代码是这样的：

const get = JSON.stringify(localStorage.getItem('pls'));
const setUs = ([get]);
...
function handleSubmit(e)
   e.preventDefault();
   var js = localStorage.getItem('Data');
   var loc = [js];
   loc.push(document.getElementById("inputKey").value);
   localStorage.setItem("Data", loc);

...
return(
   <div>
     <Table>
       <tbody>
         (setUs.map((m,i) => (
             <tr key=`$m+i`>
                <td>m</td>
             </tr>
          )))
       <tbody>
     </Table>
   </div>
)
...

我不确定如何像第二张图片那样格式化它。我尝试过使用扩展运算符，尝试不同的方法，例如JSON.parse() 和JSON.stringify()，但数组变成了[[[,\\input1\]\\input2\\]\input3\\] 之类的东西。任何帮助将不胜感激。

我正在使用 reactJS 和 reactstrap。

【参考方案1】：

您可以将hooks 用于localStorage

const useLocalStorage = (name, defaultValue) => 

    const [currentValue, setCurrentValue] = useState(JSON.parse(localStorage.getItem(name)) ?? defaultValue);
    const callback = useDelay(delay, currentValue);

    useEffect(() => 
        localStorage.setItem(name, JSON.stringify(currentValue));
    , [currentValue]);

    return [currentValue, setCurrentValue];


export default useLocalStorage;

怎么用？

import useLocalStorage from '...';

const Component = () => 
    const [pls, setPls] = useLocalStorage('pls', []);

    return (
        <>
            pls.map(v => (
                H E R E
            ))
        </>
    );
;