Как сохранить реквизиты или значения состояний без использования Redux - PullRequest
Новая
       5

Как сохранить реквизиты или значения состояний без использования Redux

0 голосов
/ 11 сентября 2018

Итак, я все еще новичок в React и пытаюсь сохранить значение состояния «количество» 

    constructor(props){
        super(props);
        this.state = {
          visible: false,
          selected: false,
          quantity: ""
        }
        this.toggleMenu = this.toggleMenu.bind(this);
    }

Я хочу передать эти данные компоненту, связанному с родителем этого компонента, и предотвратить потерю данных, если я вернусь. 

<Link to={`/itemSelection/${sessionStorage.getItem("")}/checkout`}>PROCEED</Link>

______________________________________________________-

EDITED

Таким образом, родительским компонентом является ItemSelection, внутри него я импортирую компонент Item и отображаю некоторые данные, полученные из API. 

                <div className="row">
                    {this.state.items.map(i => <Item name={i.name} quantity={i.quantity} />)}
                </div>

количество, которое я передаю Item, - это общее количество, которое я получаю от API.

Внутри элемента Item 

constructor(props){
        super(props);
        this.state = {
          visible: false,
          selected: false,
          quantity: ""
        }
        this.toggleMenu = this.toggleMenu.bind(this);
    }

количество здесь - это количество, которое я выбираю для каждого выбранного товара. когда я щелкаю ссылку на компонент оформления заказа, я теряю эти данные, и если я возвращаюсь к компоненту itemSelection, я нахожу эти данные также потерянными. Поэтому я хочу передать это количество каждого элемента в компонент оформления заказа и предотвратить потерю данных, если я снова вернусь к компоненту itemSelection. Надеюсь, что это разъяснение имеет смысл.

1 Ответ

0 голосов
/ 11 сентября 2018

Вы должны поднять свое состояние над маршрутизацией. IE: 

// ParentComponent hold state and pass it as props in RENDER props to route A and route B
<ParentComponent>
  <Switch>
    <Route ... render={props => <MycomponentA quantity={this.props.quantity}} />} /> // Route A
    <Route ...  render={props => <MycomponentA quantity={this.props.quantity}}/> // Route B
  </Switch>
</ParentComponent>
...