Блог

Главная - Вопросы по программированию - уничтожение альтернатив для перехватов

уничтожение альтернатив для перехватов

#reactjs #react-hooks

#reactjs #реагирующие перехваты

Вопрос:

Для этого accordin.js компонент, почему эта строка работает setActiveIndex(index); Я думал, что мы присвоили вещи [1] объекту setActiveIndex , тогда почему мы можем вызывать объект setActiveIndex как функцию?

         import React, { useState } from 'react';

    const Accordion = ( { items }) => {
       // const [activeIndex, setActiveIndex] = useState(null);
        const things = useState(null);
        const activeIndex = things[0];
        const setActiveIndex = things[1];
        
        const onTitleClick = (index) => {
        console.log('Title clicked', index);
        setActiveIndex(index);
        }
        const renderedItems = items.map((item, index) => {
        return (
        <React.Fragment key={item.title}>
            <div 
            className="title active"
            onClick={  () => onTitleClick(index)}
            >
            <i className="dropdown icon"></i>
                {item.title}
               
            </div>
            <div className="content active">
            <p>{item.content}</p>
            </div>
        </React.Fragment>)
        });
        return (<div className="ui styled accordion">
        {renderedItems}
        <h1>{activeIndex}</h1>
        </div>);
    };


    export default Accordion;

Комментарии:

1. Это поможет

Ответ №1:

Перехваты useState возвращают массив с двумя элементами. Первый элемент — это текущее значение этого состояния. Второй элемент — это функция для обновления значения состояния.

Идиоматический способ написать это был бы const [activeIndex, setActiveIndex] = useState(null)

В коде аккордеона things на самом деле есть массив с двумя вышеупомянутыми значениями. Следовательно things[1] , это функция setActiveIndex .

Ответ №2:

Согласно документации для useState :

Что возвращает useState? Он возвращает пару значений: текущее состояние и функцию, которая его обновляет. Вот почему мы пишем const [count, setCount] = useState() . Это похоже на this.state.count и this.setState в классе, за исключением того, что вы получаете их в паре. Если вы не знакомы с синтаксисом, который мы использовали, мы вернемся к нему внизу этой страницы.

AFAIK более идиоматическая версия может выглядеть так:

  const [activeIndex, setActiveIndex] = useState(); // null by default if not set

Это заменило бы эти строки, things полностью исключив:

 const things = useState(null);
const activeIndex = things[0];
const setActiveIndex = things[1];
Метки: