Доступ ко всему объекту состояния в React 16.8 - PullRequest
Новая
       24

Доступ ко всему объекту состояния в React 16.8

2 голосов
/ 20 марта 2019

В соответствии с реакцией 16.8 введены ответные зацепки, доступ и настройка состояния были изменены.Раньше у вас был доступ ко всему объекту состояния с помощью {this.state}, теперь, поскольку вы напрямую обращаетесь к своему состоянию, например {count} против {this.state.count}, я не мог найти способ получить доступ ко всему объекту состояния.Возможно ли восстановить весь объект состояния новым способом написания реагирующего компонента?

Чтобы быть более понятным;У меня есть React Component, который принимает состояние компонента в качестве реквизита и отображает его в пользовательском интерфейсе для целей отладки.Я знаю, что могу использовать плагин реагировать, но считаю, что более эффективно отображать состояние в пользовательском интерфейсе при кодировании. 

const {
  useState
} = React;

function App() {

  class MyComponent extends React.Component {
    constructor(props: RectangularSelectProps) {
      super(props);
      this.state = {
        expanded: false,
        otherStuff: {
          string: 'bla bla'
        }
      };
    }
    render() {
      return ( < React.Fragment >
        Component:
 *** Component Code ** * 
        Debug:
        
          {
          JSON.stringify({ ...this.state
          }, null, 2)
        }
)}} return (
);} ReactDOM.render (, document.getElementById ("root")); 
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Ответы [ 4 ]

1 голос
/ 20 марта 2019

В отличие от состояния в компоненте класса, который будет хранить состояние как объект, нет ограничения типа состояния с помощью useState hook.Может принимать состояние как string, boolean, number, object or array.Единственное предостережение в том, что setState объединит обновленный объект состояния с предыдущим состоянием, тогда как установщик хуков этого не делает.Вы также можете иметь несколько объявлений useState с несколькими различными типами состояний внутри компонента

Пример использования useState хуков будет 

const [count, setCount] = useState(0);
const [name, setName] = useState('Mr A');
const [isOpen, setIsOpen] = useState(false);
const [user, setUser] = useState({ name: 'Mr B', email: 'mrb@xyz.com'});
const [items, setItems] = useState(['Foo', 'Bar']);

Каждое использование useState будет иметь собственную ссылку и возвращать состояние и его установщик.

Установщик на useState передается с новым значением состояния.Он также может принимать функцию обратного вызова, которой передается предыдущее значение состояния

Пример 

setUser({name: 'Mr C', email: 'mrc@xyz.com'});

или 

setUser(prevState => ({...prevState, email:'mrB12@pwd.com'}))

DEMO 

const { useState } = React;

function App() {
  const [state, setState] = useState({ name: "A", email: "ABC@PWD.com" });
  const [count, setCount] = useState(0);

  return (
    <div>
      <div onClick={() => setState(prevState => ({ ...prevState, name: 'B' }))}>
        {state.name}
      </div>
      <div>{count}</div>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        Click To increment count
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

PS В большинстве случаев useState будет работать для вас.Однако, если ваше состояние становится сложным и вам нужна сложная мутация, useReducer - лучший путь вперед.Вы можете посмотреть документы здесь

0 голосов
/ 20 марта 2019

Вы можете использовать useReducer , чтобы получить нечто похожее на this.state, если вам действительно нужна какая-то сложная структура.

0 голосов
/ 20 марта 2019

Теперь с состоянием ловушек не нужно быть объектом, теперь оно разбито на каждый вызов useState(), поэтому в функциональных компонентах у вас больше нет целого состояния, представленного как сложный объект, теперь это его доли

0 голосов
/ 20 марта 2019

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

Обновление состояния с помощью ловушек, однако, заменит все существующее состояние, поэтому при таком подходе вам необходимо объединить его с существующим объектом состояния.

Пример 

const { useState } = React;

function App() {
  const [state, setState] = useState({ foo: "foo", bar: "bar" });

  return (
    <div>
      <button onClick={() => setState({ ...state, foo: Math.random() })}>
        {state.foo}
      </button>
      <button onClick={() => setState({ ...state, bar: Math.random() })}>
        {state.bar}
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
...