test

index.jsx

function Test() {
  const [postionList, setPostionList] = setState([
    {
      id: 1,
      title: 'a',
      selected: false
    },
    {
      id: 2,
      title: 'b',
      selected: false
    },
    {
      id: 3,
      title: 'c',
      selected: 'false'
    }
  ])

  const isAllSelected = useMemo(() => positionList.every(p => p.selected), [positionList])

  useEffect(() => {
    const selectedId = positionList.filter(p => p.selected).map(p => p.id)
    fetchData(selectedId)
  }, [positionList])

  const selectPosition = (id) => {
    if (id) {
      const index = positionList.findIndex(p => p.id === id)
      const p = positionList[index]
      setPostionList([
        ...positionList.slice(0, index),
        {
          ...p,
          selected: !p.selected
        },
        ...postionList.slice(index + 1)
      ])
    } else {
      setPostionList(positionList.map(p => {
        p.selected = true
      }))
    }
  }
  
  return (
    <div>
      <Filter>
        <div onClick={() => selectPosition()} className={classnames({ active: isAllSelected })}>全部</div>
        {
          positionList.map(p => (
            <div className={classnames({ active: !isAllSelected && p.selected })} onClick={() => selectPosition(p.id)}>
              {p.title}
            </div>
            )
          )
        }
      </Filter>
      <JobList />
    </div>
   )
}