Управление состоянием с помощью Context API - PullRequest
Новая
       26

Управление состоянием с помощью Context API

0 голосов
/ 30 апреля 2020

Я выполняю рефакторинг некоторого кода, потому что количество операций по бурению, которое я должен был выполнить, было просто неуправляемым, поэтому я воспринимаю это как возможность узнать о Context API, но я просто не понимаю, почему состояние не ведя себя так, как я ожидал ... Вот мой файл контекста: 

import React,{useState, createContext} from 'react';

export const MileContext = createContext();

export const MileProvider = props => {
    const [totalMiles, setTotalMiles] = useState(0);
    const [drivers, setDrivers] = useState(1);

    return (
        <MileContext.Provider 
        value = {
            [totalMiles, setTotalMiles], 
            [drivers, setDrivers]
            }>
            {props.children}    
        </MileContext.Provider>
    )
}

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

import React, {useState, useContext} from 'react';
import "./main.css";
import { MileContext } from './MileContext';


const TotalDrivers = () => {
    const [drivers, setDrivers] = useContext(MileContext);
    const onDriverChange = (event) => {
        setDrivers(event.target.value)    
      };

    return(

        <div>
            <p>Total Drivers</p>
            <label>
            <select value={drivers} onChange={onDriverChange}>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
            </label>
        </div>
    )
}

export default TotalDrivers;

import React, {useState, useContext} from 'react';
import "./main.css";
import {PRESETS} from "./presets";
import { MileContext } from './MileContext';


const PresetSelector = () => {
    const [totalMiles, setTotalMiles] = useContext(MileContext);
    const onTotalMileChange = (event) => {
        setTotalMiles(event.target.value)    
      };

    return(

            <div>
                <label>
                    <h3>Select a preset for your trip (these are round trips from the warehouse and back)</h3>
                    <select onChange={onTotalMileChange}>
                        <option value="0">Custom Trip</option>
                        {
                        Object.entries(PRESETS).map(([campus, mileage]) => (
                        <option key={campus} value={mileage}>
                            {campus}
                        </option>
                        ))} 
                    </select>
                </label>
                trip total miles = {totalMiles}
            </div>

    )
}

export default PresetSelector;

Я чувствую, что нахожусь на грани выяснения этого, но все мои googles падают. Конечно, я просто что-то неправильно понимаю или не использую правильный синтаксис. Можете ли вы помочь мне понять, как это исправить? У меня есть так много других компонентов и значений состояния, чтобы добавить в это приложение. Ох, и я обертываю их в приложение. js вот так: 

  return (
    <MileProvider>

      <Header />
      <form>
      <PresetSelector />
      <TotalDrivers />
      </form>
    </MileProvider>
  );
}

1 Ответ

2 голосов
/ 30 апреля 2020

Вы передаете кортежи внутри объекта без ключа, который имеет неверный синтаксис.

При передаче значения поставщику контекста просто укажите значения в виде объекта. 

<MileContext.Provider 
        value = {{
            totalMiles, 
            setTotalMiles, 
            drivers, 
            setDrivers
            }}>
            {props.children}    
        </MileContext.Provider>

Использование в компоненте TotalDrivers: 

const {drivers, setDrivers} = useContext(MileContext);

Использование в компоненте PresetSelector 

const {totalMiles, setTotalMiles} = useContext(MileContext);
...