在React 16.8中访问整个状态对象

时间:2019-03-20 18:51:20

标签: reactjs react-hooks

随着react 16.8引入了react钩子,访问和设置状态已更改。以前,您可以使用{this.state}访问整个状态对象,现在由于您直接访问{count}{this.state.count}这样的状态,因此我找不到访问整个状态对象的方法。是否有可能以新的编写React组件的方式检索整个状态对象?

更清楚;我有一个React Component,它以组件状态为道具,并在UI中显示它以进行调试。我知道我可以使用react插件,但是我发现在我编写代码时在UI中显示状态更为有效。

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:
        <div> *** Component Code ** * </div>
        Debug:
        <div style = {{margin: '1rem 0'}} >
        <h3 style = {{fontFamily: 'monospace'}}/> <pre style = {
          {
            background: '#f6f8fa',
            fontSize: '.65rem',
            padding: '.5rem',
          }
        } > {
          JSON.stringify({ ...this.state
          }, null, 2)
        } </pre> </div> </React.Fragment>)
      }
    }

    return ( < div > < MyComponent / > < /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>

4 个答案:

答案 0 :(得分:1)

与类组件中的状态(将状态保存为对象)不同,useState钩对状态类型没有任何限制。可以将状态设为string, boolean, number, object or array。唯一的警告是setState会将合并的状态对象与先前的状态合并,而hooks setter不会这样做。您还可以在组件中具有多个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的设置器将传递新的state值。它还可能需要一个回调函数,该函数传递了先前的state值

示例

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

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

演示

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>

P.S。在大多数情况下,useState将为您服务。但是,如果您的状态变得复杂并且需要复杂的突变useReducer是最好的解决方法。您可以看一下文档here

答案 1 :(得分:0)

如果将整个状态分成多个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>

答案 2 :(得分:0)

现在,具有钩子状态的对象不必一定要成为对象,现在可以在每个useState()调用中进行拆分,因此在功能组件中,您不再需要将整个状态表示为一个复杂的对象,现在是分数其中

答案 3 :(得分:0)

如果确实需要一些复杂的结构,则可以使用useReducerthis.state类似。