JSON.parse (localStorage.getItem ('priceSlider')). Start, Неожиданный конец ввода JSON
Я использую Localstorage.getItem для создания RangeSlider с динамическими значениями defaultSelected. Я использую rangeSlider внутри реактивного модального окна, поэтому мне нужно, чтобы когда пользователь открывал модель и использовал ползунок диапазона для создания фильтра, состояние сохраняется в LocalStorage, и когда пользователь снова открывает модальное окно, он получает rangeSlider с последним значения, которые он выбрал в начале и в конце Вот мой код:
constructor(props) {
super(props);
this.onPriceValueChange = this.onPriceValueChange.bind(this);
localStorage.setItem('priceSlider','');
}
onPriceValueChange(value){
console.info("value:",value)
console.info("value.start:",value.start)
localStorage.setItem('priceSlider', JSON.stringify(value));
console.info("localStorageonPrice:",localStorage)
var obj = JSON.parse(localStorage.getItem('priceSlider'));
console.info("OBJ:",obj);
console.info("start:",JSON.parse(localStorage.getItem('priceSlider')).start);
console.info("end:",JSON.parse(localStorage.getItem('priceSlider')).end);
}
<Modal
isOpen = {this.props.PriceModalIsOpen}
onHide = {this.handleHide}
contentLabel = "Prix Modal"
>
<RangeSlider
title = "40000-80000"
componentId = "priceSlider"
className = "priceRangeSlider"
dataField = "price.keyword"
range = {{
start: 0,
end: 100000
}}
defaultSelected = {{
start: 20000,
end: 50000
}}
rangeLabels = {{
start: "40",
end: "80"
}}
URLParams = {false}
onValueChange = {this.onPriceValueChange}
/>
</Modal>
Когда я тестирую со статическим значением для defaultSelected, как это
defaultSelected = {{
start: 20000,
end: 50000
}}
Console.log () показывает:
но когда я хочу, чтобы значения, выбранные пользователем, когда он закрыл модальный Я завязал с этим:
defaultSelected = {{
start: JSON.parse(localStorage.getItem('priceSlider')).start,
end: JSON.parse(localStorage.getItem('priceSlider')).end
}}
Но я получаю такую ошибку:
Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at ProxyComponent.render (PriceFilterModal.js:91)
at ProxyComponent.hotComponentRender (react-hot-loader.development.js:620)
at ProxyComponent.proxiedRender (react-hot-loader.development.js:635)
at finishClassComponent (react-dom.development.js:13194)
at updateClassComponent (react-dom.development.js:13156)
at beginWork (react-dom.development.js:13825)
at performUnitOfWork (react-dom.development.js:15864)
at workLoop (react-dom.development.js:15903)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:15311)
at renderRoot (react-dom.development.js:15963)
at performWorkOnRoot (react-dom.development.js:16561)
at performWork (react-dom.development.js:16483)
at performSyncWork (react-dom.development.js:16455)
at requestWork (react-dom.development.js:16355)
at scheduleWork$1 (react-dom.development.js:16219)
at scheduleRootUpdate (react-dom.development.js:16786)
at updateContainerAtExpirationTime (react-dom.development.js:16813)
at updateContainer (react-dom.development.js:16840)
at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17123)
at react-dom.development.js:17263
at unbatchedUpdates (react-dom.development.js:16680)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:17259)
at render (react-dom.development.js:17318)
at renderApp (index.js:11)
at Object. (index.js:19)
at Object../src/index.js (index.js:10)
at webpack_require (bootstrap c230f6f2604486566c3b:678)
at fn (bootstrap c230f6f2604486566c3b:88)
at Object.0 (index.less?83e0:26)
at webpack_require (bootstrap c230f6f2604486566c3b:678)
at bootstrap c230f6f2604486566c3b:724
at bootstrap c230f6f2604486566c3b:724render @ PriceFilterModal.js:91
hotComponentRender @ react-hot-loader.development.js:620
proxiedRender @ react-hot-loader.development.js:635
finishClassComponent @ react-dom.development.js:13194
updateClassComponent @ react-dom.development.js:13156
beginWork @ react-dom.development.js:13825
performUnitOfWork @ react-dom.development.js:15864
workLoop @ react-dom.development.js:15903 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 replayUnitOfWork @ react-dom.development.js:15311 renderRoot @ react-dom.development.js:15963 performWorkOnRoot @ react-dom.development.js:16561 performWork @ react-dom.development.js:16483 performSyncWork @ react-dom.development.js:16455 requestWork @ react-dom.development.js:16355 scheduleWork$1 @ react-dom.development.js:16219 scheduleRootUpdate @ react-dom.development.js:16786 updateContainerAtExpirationTime @ react-dom.development.js:16813 updateContainer @ react-dom.development.js:16840 ./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17123 (anonymous) @ react-dom.development.js:17263 unbatchedUpdates @ react-dom.development.js:16680 legacyRenderSubtreeIntoContainer @ react-dom.development.js:17259 render @ react-dom.development.js:17318 renderApp @ index.js:11 (anonymous) @ index.js:19 ./src/index.js @ index.js:10 webpack_require @ bootstrap c230f6f2604486566c3b:678 fn @ bootstrap c230f6f2604486566c3b:88 0 @ index.less?83e0:26 webpack_require @ bootstrap c230f6f2604486566c3b:678 (anonymous) @ bootstrap c230f6f2604486566c3b:724 (anonymous) @ bootstrap c230f6f2604486566c3b:724 index.js:2178 The above error occurred in the component: in PriceFilterModal (created by Connect(PriceFilterModal)) in Connect(PriceFilterModal) (at DefaultPage.js:36) in div (at DefaultPage.js:31) in DefaultPage (created by Connect(DefaultPage)) in Connect(DefaultPage) (created by Route) in Route (at Root.js:32) in Switch (at Root.js:41) in div (at App.js:33) in div (created by Styled(div)) in Styled(div) (created by URLParamsProvider) in URLParamsProvider (created by Connect(URLParamsProvider)) in Connect(URLParamsProvider) (created by ReactiveBase) in Provider (created by ReactiveBase) in ThemeProvider (created by ReactiveBase) in ReactiveBase (at App.js:29) in div (at App.js:27) in App (at Root.js:27) in Route (at Root.js:25) in Switch (created by Root) in Router (created by ConnectedRouter) in ConnectedRouter (created by Root) in Provider (at Root.js:52) in Root in AppContainer (at index.js:12)
React will try to recreate this component tree from scratch using the error boundary you provided, ReactiveBase.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:14227
logError @ react-dom.development.js:14266
callback @ react-dom.development.js:14948
callCallback @ react-dom.development.js:10879
commitUpdateQueue @ react-dom.development.js:10923
commitLifeCycles @ react-dom.development.js:14378
commitAllLifeCycles @ react-dom.development.js:15463
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15604
completeRoot @ react-dom.development.js:16619
performWorkOnRoot @ react-dom.development.js:16564
performWork @ react-dom.development.js:16483
performSyncWork @ react-dom.development.js:16455
requestWork @ react-dom.development.js:16355
scheduleWork$1 @ react-dom.development.js:16219
scheduleRootUpdate @ react-dom.development.js:16786
updateContainerAtExpirationTime @ react-dom.development.js:16813
updateContainer @ react-dom.development.js:16840
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17123
(anonymous) @ react-dom.development.js:17263
unbatchedUpdates @ react-dom.development.js:16680
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17259
render @ react-dom.development.js:17318
renderApp @ index.js:11
(anonymous) @ index.js:19
./src/index.js @ index.js:10
__webpack_require__ @ bootstrap c230f6f2604486566c3b:678
fn @ bootstrap c230f6f2604486566c3b:88
0 @ index.less?83e0:26
__webpack_require__ @ bootstrap c230f6f2604486566c3b:678
(anonymous) @ bootstrap c230f6f2604486566c3b:724
(anonymous) @ bootstrap c230f6f2604486566c3b:724
index.js:2178 An error has occured. You're using Reactivesearch Version: 2.8.1. If you think this is a problem with Reactivesearch, please try updating to the latest version. If you're already at the latest version, please open an issue at https://github.com/appbaseio/reactivesearch/issues
С Firefox я получаю:
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
Да, у меня есть этот [Object Object], так что я использую JSON.parse и JSON.Stringify
поэтому, когда вы пытаетесь выполнить JSON.parse ("[объект объекта]"), он дает вам эту ошибку.
Не могли бы вы создать демо-версию codeandbox? Я могу взглянуть.
Ответы 1
Приведенный ниже код будет работать. При сохранении в локальное хранилище вам нужно сохранить его с помощью JSON.stringify, а при получении элемента вам нужно сделать JSON.parse
import React from "react";
import ReactDOM from "react-dom";
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
import { closePriceModal } from '../filter-bar/redux/actions';
import Modal from 'react-modal';
import { RangeSlider } from '@appbaseio/reactivesearch';
export class PriceFilterModal extends Component {
static propTypes = {
simpleFilter: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
PriceModalIsOpen: PropTypes.bool.isRequired
};
constructor(props) {
super(props);
localStorage.setItem('priceSlider', '');
}
onPriceValueChange = value => {
localStorage.setItem("priceSlider", JSON.stringify(value));
this.forceUpdate();
}
handleHide = () => {
this.props.actions.closePriceModal();
}
render() {
const priceSlider = localStorage.getItem("priceSlider");
const start = JSON.parse(priceSlider).start;
const end = JSON.parse(priceSlider).end;
return (
<div className = "simple-filter-price-filter-modal">
<Modal
isOpen = {this.props.PriceModalIsOpen}
onHide = {this.handleHide}
contentLabel = "Prix Modal"
>
<div className = "multiList">
<RangeSlider
title = "40000-80000"
componentId = "priceSlider"
className = "priceRangeSlider"
dataField = "price.keyword"
range = {{
start: 0,
end: 100000
}}
defaultSelected = {{
start: start,
end: end
}}
rangeLabels = {{
start: "40000",
end: "80000"
}}
URLParams = {false}
onValueChange = {this.onPriceValueChange}
/>
</div>
<button type = "button" onClick = {this.handleHide} className = "btn btn-circle"></button>
</Modal>
</div >
);
}
}
function mapStateToProps(state) {
return {
simpleFilter: state.simpleFilter,
};
}
/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ ...actions, closePriceModal }, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(PriceFilterModal);
Пожалуйста, найдите рабочую демонстрацию здесь
Но я сделал это здесь onPriceValueChange (значение) {localStorage.setItem ('priceSlider', JSON.stringify (значение));
Я попробовал это сейчас, но получаю: index.js: 2178 Предупреждение: Неудачный тип опоры: опора defaultSelected.start помечена как требуемая в RangeSlider, но ее значение - undefined. в RangeSlider (созданном Connect (RangeSlider)). Также больше не активируется ползунок для выбора каких-либо значений! на самом деле он возвращает undefined в консоли.
Это не ошибка, это предупреждение. Вам нужно передать как объект, а не использовать двойные фигурные скобки {{}}. Я обновил свой ответ, пожалуйста, попробуйте
Я получил ошибку: Неожиданный токен, ожидается} здесь start: JSON.stringify (localStorage.getItem ('priceSlider')). Start,
Можете ли вы сделать console.info (localStorage.getItem ('priceSlider')) и сообщить мне, что он печатает
он дает: {"начало": 20000, "конец": 50000}
Можете ли вы попробовать defaultSelected = {{start: localStorage.getItem ('priceSlider'). Start, end: localStorage.getItem ('priceSlider'). End}}
value: {start: NaN, end: NaN} PriceFilterModal.js: 28 value.start: NaN PriceFilterModal.js: 30 localStorageonPrice: Storage {carsbrand: "", carsmodel: "", priceSlider: "{" start ": null, "end": null} ", length: 3} PriceFilterModal.js: 34 OBJ: {start: null, end: null} PriceFilterModal.js: 35 start: null PriceFilterModal.js: 36 end: null, и выполняется максимальное обновление глубина превышена. Это может произойти, когда компонент многократно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.
и console.info (localStorage.getItem ('priceSlider')); дает {"start": null, "end": null}
@AfefMokhtari Я нашел проблему. Возьмите последний код из моего ответа и попробуйте со своей стороны
рабочее решение генерирует ошибку в этой строке const start = JSON.parse (priceSlider) .start; что является Uncaught SyntaxError: неожиданный конец ввода JSON в JSON.parse (<anonymous>)
Пожалуйста, проверьте рабочую демонстрацию, указанную в моем ответе. Доно, почему он ломается в твоей машине
эта ошибка возникает, когда полученное значение находится в "[Object Object]"