Как вывести объекты из localStorage в React?

Question

[Валерий Петров]

В localStorage записаны данные:

Их все нужно вывести и разделить на разные div блоки (task0, task1, .... , taskn)
Я делаю так:

class TaskOutput extends Component {  
    render() {
        for (var i = 0; i < localStorage.length; i++) {
            const list = JSON.parse(localStorage.getItem('task'+i))
            return (
                <div className={'task'+i}>
                    <h1>{list['title']}</h1>
                    <p>{list['description']}</p>
                </div>
            )
        }
    }
}

Выводит только первый ключ task и цикл останавливается. Как заставить вывести всё? Помогите пожалуйста:)

Comments

[Danil777]

Hi everyone if somebody was looking for React LocalStorage with functional components you need to write this code which writed below:

function App () {
const [state,setState] = React.useState({
user: '',
rememberMe: false
})

const ref = useRef(null)

const handleChange = (event) => {
const input = event.target;
const value = input.type === 'checkbox' ? input.checked : input.value;

setState(Object.assign({}, state, {[input.name]: value }));
};


localStorage.setItem('foo', 'foo')
const handleFormSubmit = () => {
const { user, rememberMe } = state;
localStorage.setItem('rememberMe', JSON.stringify(rememberMe));

if (rememberMe) {
localStorage.setItem('user', JSON.stringify(user));
} else {
localStorage.setItem('user', '');
}
};

useEffect( () => {
const rememberMe = localStorage.getItem('rememberMe') === 'true';
const user = rememberMe ? JSON.parse(localStorage.getItem('user')) : '';
setState({ user, rememberMe });
},[])


return (


User:


Remember me

Sign In

);
}



export default App;

[Danil777]

i see some problems with tags:

function App () {
  const [state,setState] = React.useState({
    user: '',
    rememberMe: false
  })

  const ref = useRef(null)
 
  const handleChange = (event) => {
    const input = event.target;
    const value = input.type === 'checkbox' ? input.checked : input.value;
 
    setState(Object.assign({}, state, {[input.name]: value }));
  };
 
 
  localStorage.setItem('foo', 'foo')
  const handleFormSubmit = () => {
    const { user, rememberMe } = state;
    localStorage.setItem('rememberMe', JSON.stringify(rememberMe));

    if (rememberMe) {
      localStorage.setItem('user', JSON.stringify(user));
    } else {
      localStorage.setItem('user', '');
    }
  };
  
   useEffect( () => {
    const rememberMe = localStorage.getItem('rememberMe') === 'true';
    const user = rememberMe ? JSON.parse(localStorage.getItem('user')) : '';
    setState({ user, rememberMe });
  },[])

 
    return (
      <form onSubmit={handleFormSubmit} ref={ref}>
        <label>
          User: <input name="user" value={state.user} onChange={handleChange}/>
        </label>
        <label>
          <input name="rememberMe" checked={state.rememberMe} onChange={handleChange} type="checkbox"/> Remember me
        </label>
        <button type="submit">Sign In</button>
      </form>
    );
}
 
 


export default App;

Answer 1

[Vitaliy]

Нужно не return делать, а записывать это в массив. И ключ брать по индексу, а не в виде "task"+i

class TaskOutput extends Component {  
    render() {

        var list = [];
        for (var i = 0; i < localStorage.length; i++) {
            const list = JSON.parse(localStorage.getItem(localStorage.key(i)))
            list .push(
                <div className={'task'+i}>
                    <h1>{list['title']}</h1>
                    <p>{list['description']}</p>
                </div>
            )
        }
        return <div>list</div>;
    }
}

Comments

[Валерий Петров]

Огромное спасибо!

Answer 2

[Олег Гамега]

за подобные вещи в render в приличном обществе пальцы ломают
чтение из localStorage, интернета, любые другие долгие операции и операции для работы с данынми не должны быть в компоненте

я бы использовал redux для данных, thunk для асинхроных операций и если бы вы захотели потом добавить бекенд с апи, или подключить какой то sas вроде firebase вместо localStorage, вам бы не пришлось менять в компонентах ни строчки кода

Comments

[Валерий Петров]

Да, я понимаю:) Просто здесь нужно так. Redux еще не в моем понимании:)

[Олег Гамега]

Кирилл Кирпиченко, тогда как задел на будущее (с этого начинаю когда обучаю новых людей) данные бы готовил в одном компоненте а прокидывал бы их вдругом
тоесть в одном умном конетейнере сформировал бы масив ключей и объект сущностей по этим ключам (выглядело бы это примерно так)

.....
const result = ['task0', 'task1', .....]
const entity ={
    task0:{......}
}
....

ну а в глупом компоненте бы просто рендерил данные из пропсов
такой подход делает код чуть чище и облегчает переход на redux

[Валерий Петров]

Олег Гамега, хмм, хорошо, спасибо:)