Как передать несколько состояний через API реагирующего контекста - PullRequest
Новая
       1

Как передать несколько состояний через API реагирующего контекста

1 голос
/ 26 марта 2020

Я создаю игровое приложение реагирования и хочу передать состояние по нескольким компонентам. Для этого я впервые пытаюсь отреагировать на контекст api. Так что это мой GameContext. js

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

const GameContext = createContext();

const GameProvider = ({ children }) => {
  const [name, setName] = useState('');
  const [color, setColor] = useState('');
  const [startgame, setStartgame] = useState(false);


  return (
    <GameContext.Provider value={[name, setName]}>
      {children}
    </GameContext.Provider>
  );
};

export { GameContext, GameProvider };

И я могу получить доступ к name в дочернем компоненте, используя 

import { GameContext } from '../../context/GameContext';    
const [name, setName] = useContext(GameContext);
console.log(name);

Но теперь я хочу получить другой значения состояний в один и тот же дочерний компонент, например [color, setColor] и [startgame, setStartgame], из GameContext. js.
Как получить эти значения в дочерний компонент?

У меня есть еще один вопрос, почему-то я чувствую, что это действительно глупый вопрос, но почему я не могу сделать что-то подобное в GameContext. js? ... 

<GameContext.Provider value={[name, setName,color, setColor, startgame, setStartgame]}>

и получить значения в дочернем компоненте следующим образом ... 

const [name, setName,color, setColor, startgame, setStartgame] = useContext(GameContext);

Я пробовал это, но браузер жалуется, что я нарушаю правила ловушек реагирования.

Ответы [ 3 ]

2 голосов
/ 26 марта 2020

useReducer лучше подходит для вашего случая: 

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

const initialState = {
  name: '',
  color: '',
  startgame: false
}

function reducer(state, action) {
  return { ...state, ...action };
}

const GameContext = createContext();

const GameProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <GameContext.Provider value={{ state, dispatch }}>
      {children}
    </GameContext.Provider>
  );
};

export { GameContext, GameProvider };

Дочерний компонент: 

import { GameContext } from '../../context/GameContext'; 

...

const { state: { name, color }, dispatch } = useContext(GameContext);
console.log(name);
console.log(color);

// event handler
const handleChangeName = (event) => {
  dispatch({ name: event.target.value });
}

const handleChangeColor = (event) => {
  dispatch({ color: event.target.value });
}
1 голос
/ 26 марта 2020

Поставщик допускает передачу любого значения, чтобы вы могли здесь указывать объект paas и свои значения в качестве свойств. 

<GameContext.Provider
 value={{ name: [name, setName], color: [color, setColor] }}
   >
  {props.children}
</GameContext.Provider>;

и где вы осуществляете доступ в Child 

 const { name, color } = React.useContext(MyContext);
 const [nameValue, setnameValue] = name;
 const [colorValue, setcolorValue] = color;
1 голос
/ 26 марта 2020 
import React, { useState, createContext } from 'react';

const GameContext = createContext();

const GameProvider = ({ children }) => {
  const [state, setState] = useState({
       name: '',
       color: '',
       startgame: false
  });


  return (
    <GameContext.Provider value={{
         ...state, 
         setState: (data) => setState({...state, ...data})
       }
    >
      {children}
    </GameContext.Provider>
  );
};

export { GameContext, GameProvider };

import { GameContext } from '../../context/GameContext';    
const {name, color, startGame, setState} = useContext(GameContext);
console.log(name);
// Updating name
setState({ name: 'test' });
...