React useState, похоже, не принимает значение по умолчанию здесь? - PullRequest
Новая
       15

React useState, похоже, не принимает значение по умолчанию здесь?

0 голосов
/ 24 июня 2019

У меня есть компонент диаграммы, в котором можно показать / скрыть определенные линии.Чтобы отслеживать, какие строки активны, я сохраняю массив activeKeys в состоянии.Изначально я получаю имена ключей из функции getKeys, которая принимает массив данных.

Когда я делаю это: 

    const defaultValue = getKeys(data)
    console.log('defaultValue from keys', defaultValue)
    const [activeKeys, setActiveKeys] = useState(defaultValue)
    console.log('activeKeys', activeKeys)

Первый журнал консоли показывает правильные ключи: 

["createdCount", "confirmedCount", "hasFeedbackCount"]

Второй журнал консоли показывает []

Но , если я сделаю: 

const defaultValue = ["createdCount", "confirmedCount","hasFeedbackCount"]
console.log('defaultValue', defaultValue)
const [activeKeys, setActiveKeys] = useState(defaultValue)
console.log('activeKeys', activeKeys)

Первый консольный журнал показывает тот же массив: 

["createdCount", "confirmedCount", "hasFeedbackCount"]

И activeKeys показывает правильныймассив: 

["createdCount", "confirmedCount", "hasFeedbackCount"]

useState сломан или что-то?По getKeys это простая функция, без обещаний или чего-то в этом роде.Это выглядит так: 

const getKeys = (data: Props['data']): string[] => {
  const reduced = data.reduce((acc, datum) => [...acc, ...Object.keys(datum.lines)] as any, [])
  const setted = new Set(reduced)
  const arrayed = Array.from(setted)
  return arrayed
}

Форма Props['data'] имеет вид: 

  data: {
    date: string
    lines: Partial<Record<string, number>>
  }[]

Ответы [ 3 ]

1 голос
/ 24 июня 2019

Кажется, что нет проблем с useState.

Согласно React DOCs :

Что мы передаемиспользоватьState в качестве аргумента?

Единственным аргументом для ловушки useState () является начальное состояние. В отличие от классов, состояние не обязательно должно быть объектом.Мы можем сохранить число или строку, если это все, что нам нужно. В нашем примере мы просто хотим получить число для того, сколько раз пользователь нажал, поэтому передайте 0 в качестве начального состояния для нашей переменной.(Если бы мы хотели сохранить два разных значения в состоянии, мы бы дважды вызвали useState ().)

Так что совершенно нормально передавать массив строк в качестве начального состояния для useState.Даже если это результат функции.(см. фрагмент ниже).

Я не смог воспроизвести вашу функцию getKeys здесь, в редакторе фрагментов кода SO, предлагаю вам дополнительно проверить это.Хотя это также может быть проблемой с создателем сниппета, который может не поддерживать некоторые функции JS.

ПРИМЕЧАНИЕ. Это не проблема с useState.Что-то еще идет не так.Попробуйте представить рабочий пример воспроизводимой проблемы. 

function App() {
  
  const someFunction = (x) => {
    return x;
  }
  
  const data = ['A','B','C'];
  
  const [state,setState] = React.useState(someFunction(data));
  
  console.log(state);
  
  return(
    <div>{state.toString()}</div>
  );
}

ReactDOM.render(<App/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
0 голосов
/ 24 июня 2019

Понятия не имею, что случилось, но я внес некоторые изменения, и теперь все работает хорошо ...

0 голосов
/ 24 июня 2019

Вы передаете def вместо defaultValue в useState (); 

const defaultValue = getKeys(data)
console.log('defaultValue from keys', defaultValue)
const [activeKeys, setActiveKeys] = useState(defaultValue)
console.log('activeKeys', activeKeys)
...