Предоставление React State имени в DevTools - PullRequest
Новая
       2

Предоставление React State имени в DevTools

0 голосов
/ 14 января 2020

При использовании React useState (), если у вас есть что-то вроде следующего const [cartItems, setCartItems] = useState([]), оно отображается в React DevTools как State: []. Кроме изменения состояния из массива в объект, содержащий массив, такой как useState({ cartItems: [] }), есть ли что-нибудь еще, что я могу сделать, чтобы показать ключ для состояния? Если нет, то это плохая практика использования объекта или я в порядке, используя это? Причина, по которой я хочу получить ключ, заключается в том, что при отладке, если у вас есть несколько различных элементов состояния, DevTools просто показывает как State: [], State: {[...]}, State: [] et c, что трудно понять, что к чему.

Ответы [ 2 ]

0 голосов
/ 14 января 2020

Это не то, что вам нужно, но вы можете добавить метку к хукам внутри инструментов разработчика, используя useDebugValue, если у вас несколько хуков, он покажет вам массив с метками в порядке что вы звоните useDebugValue, поэтому, если у вас есть несколько хуков, убедитесь, что вы можете useDebugValue в том же порядке 

const [cartItems, setCartItems] = useState([])
const [otherState, setOtherState] = useState([])
useDebugValue('cartItems')
useDebugValue('otherState')
0 голосов
/ 14 января 2020

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

const [someSpecialAwesomestate, setSomeSpecialAwesomestate] = useState();

приравнивается к 

const stateObject = useState();
// stateObject[0] is the state
// stateObject[1] is the callback state mutator function

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

Возможно, будет несколько более многословно хранить объекты с одним root ключ, и утомительно управлять обновлениями состояния, но если это помогает вашему потоку разработчиков видеть, что каждый объект состояния IS в devtool, тогда почему бы не делать то, что помогает вам код лучше?

...