Блог

Я пытаюсь создать список, в котором вы нажмете кнопку слева, и она даст вам краткое описание элементов справа. Массив состояний обновляется, и в список добавляются новые элементы, но текст для количества элементов обновляться не будет. Сумма увеличивается только в том случае, если я выполняю другой рендеринг или пока я не добавлю другой элемент в список.

[скриншот][1]: https://i.stack.imgur.com/XW7PU.png

Есть ли способ обновить текстовое представление для количества?

 export default function EquipmentSelect() {  const [selectedEquipment, setSelectedEquipment] = useState([]);   const equipmentList = [  { name: 'item 1', id: '0111' },  { name: 'item 3', id: '0112' },  { name: 'item 5', id: '0113' },  { name: 'item 6', id: '0114' },  { name: 'item 7', id: '0115' },  { name: 'item 8', id: '0116' },  { name: 'item 9', id: '0116' },  { name: 'item 10', id: '0117' },  { name: 'item 11', id: '0118' },  { name: 'item 12', id: '0119' },  ]   const handleButtonClick = (event, value) =gt; {  if (!handleCheck(value)) {  setSelectedEquipment(selectedEquipment =gt; [...selectedEquipment, { key: value.id, name: value.name, quantity: 1 }])  }  else {  const selectedItemIndex = selectedEquipment.findIndex(item =gt; item.key === value.id)  selectedEquipment[selectedItemIndex] = {  ...selectedEquipment[selectedItemIndex], quantity: selectedEquipment[selectedItemIndex].quantity   1  }  }  }  function handleCheck(value) {  return selectedEquipment.some(item =gt; value.name === item.name);  }   return (  lt;div class='equipmentContainer divRowFlex'gt;  lt;div class='addEquipment'gt;  lt;Autocomplete  freeSolo  options={equipmentList.map((option) =gt; option.name)}  renderInput={(params) =gt; lt;TextField {...params} label="Type to search..." /gt;}  /gt;  lt;List sx={{  width: '100%',  position: 'relative',  overflow: 'auto',  maxHeight: 300,  'amp; ul': { padding: 0 },  }}gt;  {equipmentList.map((value) =gt; (  lt;ListItem  key={value}  disableGutters  secondaryAction={  lt;IconButton  onClick={(event) =gt; handleButtonClick(event, value)}  gt;  lt;MdAddCircle size='18' className='text-secondary my-auto' /gt;  lt;/IconButtongt;  }  gt;  lt;ListItemText primary={`${value.name}`} /gt;  lt;/ListItemgt;  ))}  lt;/Listgt;  lt;/divgt;  lt;div class='selectedEquipment divColFlex'gt;  lt;div class='divRowFlex selectedEquipmentHeader'gt;  lt;h1gt;Selected Equipment:lt;/h1gt;  lt;h1gt;QTYlt;/h1gt;  lt;/divgt;  lt;div class='selectedEquipmentItemContainer 'gt;  {selectedEquipment.map(item =gt;  lt;div class='divRowFlex selectedEquipmentItem'gt;  lt;h2gt;{item.name}lt;/h2gt;  lt;h2gt;{item.quantity}lt;/h2gt;  lt;/divgt;  )}  lt;/divgt;  lt;/divgt;  lt;/divgt;  ); }  

 selectedEquipment[selectedItemIndex] = {  ...selectedEquipment[selectedItemIndex], quantity: selectedEquipment[selectedItemIndex].quantity   1  }  

Не звонит setState и, следовательно, не будет заставлять повторную отправку

 setSelectedEquipment(prev=gt; {  prev[selectedItemIndex] = {  ...prev[selectedItemIndex], quantity: prev[selectedItemIndex].quantity   1  }  return prev }  

Будет действовать та же логика с повторным отправлением

Мне удалось найти решение. Это связано с тем, что я никогда не обновлял массив состояний.

 let newArry = [...selectedEquipment]  const selectedItemIndex = newArry.findIndex(item =gt; item.key === value.id)  newArry[selectedItemIndex] = {  ...newArry[selectedItemIndex], quantity: newArry[selectedItemIndex].quantity   1  }  setSelectedEquipment(newArry)  }