Блог

У меня есть компонент, в котором есть строка поиска, каждый раз, когда пользователь вводит в нее данные, он отправляется на сервер для получения списка объектов и создает карту из каждого.

Я пытаюсь добавить сворачивание в каждую карту с помощью кнопки «Показать больше».

это вроде как работает, но не полностью, например: я ищу «a» и получаю abc, нажимаю «Показать больше», но ничего не происходит, но когда я добавляю b (поиск «ab»), коллапс работает.

не знаю почему.

вот мой компонент:

 export const Phrases = (props) =gt; {   const expandRef = useRef({ expandIndex:- 1});  const searchValueRef = useRef('')  const [cards, setCards] = useState([])   const clearState = () =gt; {  setCards([])  searchValueRef.current.value = '';  expandRef.current.expandIndex = -1;  }    const setExpansion = (index) =gt; {  const newIndex = expandRef.current.expandIndex === index ? -1 : index;    expandRef.current.expandIndex = newIndex;  }   const searchPhrase = () =gt; {  const val = searchValueRef.current.value;  getPhrase(val)  .then(value =gt; {  const cards = value.map((phrase, index) =gt; {  return lt;Grid item style={{width: '80%'}}gt;  lt;Box component={Card} variant="outlined" container  boxShadow={3}  spacing={3}gt;   lt;CardContentgt;  lt;Typography variant="h5" component="div"gt;  {phrase.title}  lt;/Typographygt;  lt;IconButton  onClick={() =gt; setExpansion(index)}  gt;  show more  lt;/IconButtongt;  lt;/CardContentgt;  lt;Collapse in={expandRef.current.expandIndex === index} timeout="auto" unmountOnExitgt;  lt;CardContentgt;  lt;divgt;some valueslt;/divgt;  lt;/CardContentgt;  lt;/Collapsegt;  lt;/Boxgt;  lt;/Gridgt;  })  setCards(cards);   });  }   return (  lt;divgt;  lt;Box  component="form"  sx={{  'amp; gt; :not(style)': {m: 1, width: '90ch'},  }}  noValidate  autoComplete="off"  gt;  lt;TextField id="standard-basic" placeholder="חפש מונח" variant="standard" fullWidth  onChange={searchPhrase} inputRef={searchValueRef}  InputProps={{  startAdornment: (  lt;InputAdornment position="start"gt;  lt;SearchIcon/gt;  lt;/InputAdornmentgt;   ),  endAdornment:  lt;IconButton onClick={clearState}gt;xlt;/IconButtongt;  }}/gt;   lt;/Boxgt;  lt;Grid  container  spacing={2}  direction="column"  alignItems="center"  justifyContent="top"  style={{minHeight: '100vh'}}  gt;  {cards}  lt;/Gridgt;  lt;/divgt;  );   }