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

Question

作为React 16.8引入的React挂钩，访问和设置状态已更改。以前，您可以使用{this.state}访问整个状态对象，现在，由于您像{count}与{this.state.count}直接访问状态，因此我找不到访问整个状态对象的方法。是否有可能以新的写作方式检索整个状态对象？

更清楚；我有一个React组件，该组件将组件状态作为Props，并在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>

Answer 1

如果您确实需要一些复杂的结构，则可以使用用户debs具有与this.state相似的东西。

Answer 2

与类组件中的状态不同，该状态将作为对象保持状态，没有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: '[e-mail]'});
const [items, setItems] = useState(['Foo', 'Bar']);

useState的每种用法都会有其自己的参考，并返回状态及其设定器。

useState的设置器与状态的新值传递。它也可能采用一个回调函数，该函数通过状态的先前值

示例

setUser({name: 'Mr C', email: '[e-mail]'});

或

setUser(prevState => ({...prevState, email:'[e-mail]'}))

演示

const { useState } = React;
function App() {
  const [state, setState] = useState({ name: "A", email: "[e-mail]" });
  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是前进的最佳方法。您可以在此处查看文档

Answer 3

如果将其分配为多个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>