React Hooks заполнить массив

Question

Сценарий: у меня есть массив объектов для заполнения списка. Когда пользователь нажимает на один из элементов, этот элемент должен быть визуально «выбран», и то, что я думаю, помещается в новый массив с именем «selectedList». Если пользователь нажимает на другой невыбранный элемент, который становится выбранным, а также сохраняет предыдущий выбор. Если пользователь щелкает выбранный элемент, ему необходимо переключить выбранное состояние на невыбранное и удалить в массиве selectedList.

Я думаю об этом, чтобы сначала был добавлен массив selectedList, состоящий из объекта по умолчанию, а затем, когда пользователь щелкает другие объекты, помещает их в массив. У меня есть это до сих пор.

Как я могу переключить выбор в массиве и как проверить массив selectedList, чтобы я мог сказать компоненту «FundCard» установить его выбранное состояние в true, чтобы он визуально обновлялся до выбранного состояния?

Вот что у меня есть:

import React, {useState, useEffect} from 'react';
import styled from 'styled-components';
import FundCard from '../FundCard'

const FundDLWrap = styled.ul`
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-left: 1px solid #e6e6e6;
  margin-top: -40px;
  height: 1007px;
  overflow-y: scroll;
  li {
    &:hover {
      cursor: pointer;
    }
  }
`

const FundDetailList = ({data, fundID}) => {
  const [selectedList, setSelectedList] = useState([fundID]);

  const listSelection = (i) => {
    setSelectedList([...selectedList, i]);
  }

  console.log("selected list", selectedList);

  return (
    <FundDLWrap>
      {data.map((item, i) => {
        // one item must always be selected - the item ID the user came from 
        const selected = fundID === i;

        return (
          <li key={i} onClick={() => listSelection(i)}>
            <FundCard data={item} vertical={true} selected={selected} />
          </li>
        );
      })}
    </FundDLWrap>
  )
}

export default FundDetailList;

Вот как выглядит один из объектов данных:

{
    saved: false,
    name: 'Title here',
    dailyChange: "3.52",
    inc: true,
    price: '132.42',
    priceDate: '11 Mar 2020',
    volRating: 1,
  },

обратите внимание, что данные являются внешними и не хранятся в штат.

Answer 1

Если указанный индекс i находится в selectedList, отфильтруйте его, в противном случае добавьте его в копию массива.

Используйте ту же самую проверку selectedList.includes(i) в возвращаемом наборе selected опора FundCard.

const FundDetailList = ({data, fundID}) => {
  // Don't populate index 0 with fundID, it'll get matched in the map function
  const [selectedList, setSelectedList] = useState([]);

  const listSelection = (i) => {
    setSelectedList(
      selectedList.includes(i) 
        ? selectedList.filter(index => index !== i) 
        : [... selectedList, i]
    );
  }

  return (
    <FundDLWrap>
      {data.map((item, i) => {
        // one item must always be selected - the item ID the user came from 
        const selected = selectedList.includes(i) || fundID === i;

        return (
          <li key={i} onClick={() => listSelection(i)}>
            <FundCard data={item} vertical selected={selected} />
          </li>
        );
      })}
    </FundDLWrap>
  )
}