Можно ли React.useState (() => {}) в React? - PullRequest
Новая
       44

Можно ли React.useState (() => {}) в React?

1 голос
/ 10 апреля 2019

возможно ли использовать function в качестве состояния моего React-компонента?

пример кода здесь: 

// typescript 
type OoopsFunction = () => void;

export function App() {
    const [ooops, setOoops] = React.useState<OoopsFunction>(
        () => console.log('default ooops')
    );

    return (
        <div>
            <div onClick={ ooops }>
                Show Ooops
            </div>

            <div onClick={() => {
                setOoops(() => console.log('other ooops'))
            }}>
                change oops
            </div>
        </div>
    )
}

но это не работает ... defaultOoopsбудет вызван в самом начале, и при нажатии change oops, otrher ooops будет записано в консоль сразу, не регистрируясь после повторного нажатия Show Ooops.

почему?

возможно ли этодля меня использовать функцию в качестве состояния моего компонента?

или в React есть свои особые способы обработки таких the function state?

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

Реализация useState в React составляет 

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

Это показывает, что вы действительно можете использовать функцию в качестве параметра, и эта функция должна возвращать тип S. В вашем случае S будет undefined, потому что () => console.log(...) ничего не возвращает, , хотя вы явно указали его как OoopsFunction.

Так что, если вы хотите сохранить функцию как состояние через useState, вам нужно реализовать подход Толле, где функция фактически возвращает функцию, а не undefined.

0 голосов
/ 11 апреля 2019

Можно установить функцию в состояние с помощью хуков, но поскольку состояние можно инициализировать и обновить с помощью функции, которая возвращает начальное состояние или обновленное состояние, вам необходимо предоставить функцию, которая, в свою очередь, возвращает нужную вам функцию.поставить в состояние. 

const { useState } = React;

function App() {
  const [ooops, setOoops] = useState(() => () => console.log("default ooops"));

  return (
    <div>
      <button onClick={ooops}>Show Ooops</button>

      <button
        onClick={() => {
          setOoops(() => () => console.log("other ooops"));
        }}
      >
        change oops
      </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>
...