javascript - 如何在 ReactJS 中使用 LocalStorage 更新状态

Question

我有一个数组，每次调用 componentDidMount() 时都会获取 API 数据。我有一个默认 bool 值 true 的对象被推送到数组中的每个元素。已设置 onClick 函数，以便当单击特定元素时，其 bool 值将更改为 false，并将数组放置在 localStorage 中。

我需要数据数组在每次重新加载页面时不断刷新，因此我在我的 componentDidMount() 方法中进行了检查，该方法仅从我刚刚保存在 localStorage 中的数组接收 bool 值。

尽管这可行，但 bool 值是根据索引分配的，而不是针对元素本身。这里的问题是，如果位置 2 中的元素“A”最初设置为 false，然后在另一个 API 调用之后与位置 3 中的元素“B”交换，则 bool 值将不正确，就像“B”现在一样为假，“A”现在为真。

import React from 'react';
import StarBorder from '@material-ui/icons/StarBorder';
import Star from '@material-ui/icons/Star';
import axios from 'axios';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          data: [],
        }
    }

    componentDidMount() {

            axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=true')
            .then(res => {
                const data = res.data;

                const fromLocalStorage = localStorage.getItem('test');

                if (localStorage.getItem('test')) {
                  const dataFromLocalStorage = JSON.parse(fromLocalStorage);
                  this.setState({ data: data.map((x, i) => ({...x, starIcon: dataFromLocalStorage[i].starIcon }))})
                } else {
                 this.setState({ data: data.map(x => ({...x, starIcon: true}))})
                }

            }) 
    }

    handleClick = (n) => {

        this.setState(prevState => ({
          data: prevState.data.map((x) => (x === n ? {
            ...x,
            starIcon: !x.starIcon
          } : x))
        })
        , () => {
          localStorage.setItem('test', JSON.stringify(this.state.data));
        });

      }

    render() {
        return (
        <div>
            <table border="1">
                <thead>
                    <tr>
                    <td>Rank</td>
                    <td>Icon</td>
                    <td>Name</td>
                    <td>Price</td>
                    </tr>
                </thead>
                <tbody>
                {this.state.data.map((n, i) => {
                    return (
                        <tr>
                        <td>{n.market_cap_rank}</td>
                        <td> <span onClick={() => this.handleClick(n)}> {n.starIcon ? <StarBorder/> : <Star /> } </span> </td>
                        <td>{n.name}</td>
                        <td>{n.current_price}</td>
                        </tr>
                    );
                    })}
                </tbody>
            </table>
        </div>
        );
    }
}

export default Test;

Codesandbox 链接 https://codesandbox.io/s/shy-fog-7yplb

如果您要通过单击 true 到 false 来更改位置 40 中名为“Algorand”的项目，则可以按预期工作。然而，API 调用将刷新其余数据，“Algorand”可能不再位于位置 40，但位置 40 中的 bool 值仍然为 false，并且不会映射到“Algorand”

Answer 1

尝试在您的 componentDidMount 中使用它

const fromLocalStorage = localStorage.getItem("test");

if (localStorage.getItem("test")) {
          const dataFromLocalStorage = JSON.parse(fromLocalStorage);
          let updatedData = data.map((d) => {

            const result = dataFromLocalStorage.find( dfls => dfls.id === d.id );
            return {...d, starIcon: result.starIcon} ;
          })
          this.setState({
            data: updatedData
          });
        } else {
          this.setState({ data: data.map(x => ({ ...x, starIcon: true })) });
        }

我在这里所做的是，当您在状态中映射刷新的数据时，我不是匹配整个对象(这将无法正确工作)，而是从数组中找到正确的对象并使用其中的 startIcon 。