Крючки: Как получить глобальное состояние (this.state)? - PullRequest
Новая
       6

Крючки: Как получить глобальное состояние (this.state)?

0 голосов
/ 03 мая 2019

Реакция - 16.8.6
Реакт-дом - 16.8.6
Next.js - 8.1.0

Итак, я нахожусь в процессе обновления некоторого унаследованного кода, чтобы он соответствовал Hook, и хочу знать, как добиться следующего с помощью эквивалентного хука: 

<Mutation mutation={UPDATE_ITEM_MUTATION} variables={this.state}>
  <form />
</Mutation

, где this.state - это общая сумма всех сохраненных данных формы.

Ответы [ 2 ]

0 голосов
/ 03 мая 2019

Итак, что я искал, было: 

  const [state, setState] = useState({
    value1: '',
    value2: '',
    value3: 0,
    ...
  });

 const handleValueChange = (e) => setState({ ...state, value1: e.target.value });
 ...
 <Mutation mutation={UPDATE_ITEM_MUTATION} variables={state}>
0 голосов
/ 03 мая 2019

Мне приходится многое отличать от такой маленькой информации. Я предполагаю, что вы хотите использовать ловушку React, например useState(), а не this.state и setState.

Если у вас есть что-то вроде 

import React from 'react'
class WrappingComponent extends React.Component {
   state = {value1: '', value2: 0}

   render() {
       return (
          <Mutation mutation={UPDATE_ITEM_MUTATION} variables={this.state}>
             <form />
          </Mutation>
       )
   }
}

Вам нужно

  1. Преобразование компонента класса в функциональный компонент.
  2. Инициализируйте состояние и используйте useState() для получения состояния как локального значения.
  3. useState() также возвращает установщик, который заменяет this.setState() для этого конкретного элемента состояния. 
import React, {useState} from 'react'
function WrappingComponent() {
   const [value1, setValue1] = useState('')
   const [value2, setValue2] = useState(0)

   return (
      <Mutation mutation={UPDATE_ITEM_MUTATION} variables={{value1, value2}}>
         <form />
      </Mutation>
   )
}
...