elarri's questions

我需要向服务器发出两个连续请求：
getAllPersons，然后是 getPersonsForSelect。

当应用程序加载时，这些请求应该发送到服务器，我使用 useEffect 使它们：

  useEffect(() => {
    dispatch(getAllPersons(mainPersonId))
    dispatch(getPersonsForSelect(processName))
  },[])

  const allbossPerson = useSelector(store => { return store.persons.allbossPerson })
  const personsForSelect = useSelector(store => { return store.persons.personsForSelect })

问题是使用 console.log() 我得到每台服务器的两次点击，即 共 4 个：

import {
    GET_ALL_PERSONS,
    GET_PERSONS_FOR_SELECT
} from "../types/person"

const initialState = {
    allbossPerson: [],
    personsForSelect: []
}

export const persons = (state = initialState, action) => {
    switch (action.type) {
        case GET_ALL_PERSONS:
            console.log('GET_ALL_PERSONS')
            const allPersons = action.allPersons.slice();
            return {
                ...state,
                allbossPerson: allPersons
            }
        case GET_PERSONS_FOR_SELECT:
            console.log('GET_PERSONS_FOR_SELECT')
            const personsForSelect = action.personsForSelect.slice();
            return {
                ...state,
                personsForSelect: personsForSelect
            }
            default:
                return state
    }
}

那些。在控制台中，我有这张图片：

GET_PERSONS_FOR_SELECT
2personReducer.js:14 GET_ALL_PERSONS
personReducer.js:21 GET_PERSONS_FOR_SELECT

我究竟做错了什么？为什么他们被调用了 2 次？

我有一个带有 DropDown 容器的下拉列表。该容器具有组。当全局状态发生变化并且必要的数据来自服务器时，会呈现 DropDown 元素：

const groupsWithData = useSelector(store => { return store.persons.structurePersons })
      useEffect(() => {
          if (groupsWithData) {
              setGroupElem(groupsWithData.map((item) => {
                  return <Group 
                  key={item.group_id} 
                  groupName={item.group_name} 
                  idGroup={item.group_id} 
                  positionData={item.group_data} 
                  isOpen={item.group_isOpen}
                  handleToggleVisibleGroup={handleToggleVisibleGroup}
                  />
              }))
            }          
      },[groupsWithData])

在这种情况下，很多东西都传递给了 Group 元素。Group 也是具有嵌套元素的元素。除了来自 State 的数据之外，还向 Group 传递了一个函数，该函数handleToggleVisibleGroup应该通过单击 Group 来更改组是打开还是关闭的符号。发生在我身上的事情 - 我渲染了一个 DropDown 并且我假设所有组都被渲染了，所以我如何根据全局状态展开 DropDown 并查看所有嵌套的组......我运行该函数

handleToggleVisibleGroup по клику на Group. 
    const handleToggleVisibleGroup = (groupId) => {
        dispatch(toggleVisiblePosition(groupId))
    }

reducer 为我工作，State 中的数据按计划更改...但是没有重新渲染...我查看了数据和 devtool 并感到惊讶... Group 根本没有渲染...我不明白发生了什么

整个 DropDown 组件：

import React, { useState, useEffect } from "react";
import './DropDown.css'
import Group from "../Group/Group";
import Button from "../Button/Button";

import {useDispatch, useSelector} from 'react-redux';
import { toggleVisiblePosition } from '../../redux/actions';

const DropDown = () => {
    const dispatch = useDispatch();
    const [isVisibleDopDown, setIsVisibleDropDown] = useState(false)
    const [groupElem, setGroupElem] = useState(<Group/>)

    const groupsWithData = useSelector(store => { return store.persons.structurePersons })

    const handleToggleVisibleGroup = (groupId) => {
        dispatch(toggleVisiblePosition(groupId))
    }

      useEffect(() => {
          if (groupsWithData) {
              setGroupElem(groupsWithData.map((item) => {
                  return <Group 
                  key={item.group_id} 
                  groupName={item.group_name} 
                  idGroup={item.group_id} 
                  positionData={item.group_data} 
                  isOpen={item.group_isOpen}
                  handleToggleVisibleGroup={handleToggleVisibleGroup}
                  />
              }))
            }          
      },[groupsWithData])


    const toggleVisibleDropDown = (e) => {
        setIsVisibleDropDown(!isVisibleDopDown)
    }

    return (
        <div className="drop-down">
            <Button
                handleClick={toggleVisibleDropDown}
                cusStyle={`button button_drop-down-menu ${isVisibleDopDown === true ? 'button_drop-down-menu_visible' : ''}`}
                text={'Сотрудники'}
            />
            <ul className={`drop-down__container ${isVisibleDopDown === true ? 'drop-down__container_visible' : ''}`}>
                {groupElem}
            </ul>
        </div>
    )
}

export default DropDown;

组组件

import './Group.css'
import React from "react";
import Checkbox from "../Checkbox/Checkbox";
import Position from "../Position/Position";
import arrow from "../../img/arrow.png";
import uniq from 'uniqid';


const Group = ({ groupName, positionData, idGroup, isOpen, handleToggleVisibleGroup }) => {

    return (
        <li onClick={() => handleToggleVisibleGroup(idGroup)} className="group">
            <div className="group__header">
                <Checkbox label={groupName} />
                <img className="group__header-img" src={arrow} alt="" />
            </div>
            <ul className={`group__items-list ${isOpen === true ? 'group__items-list_visible' : ''}`}>
                {
                    positionData.map((item) => {
                        const keyId = uniq()
                        return <Position
                            id={keyId}
                            key={keyId}
                            label={item.position_name}
                            persons={item.persons}
                        />
                    })
                }
            </ul>
        </li>
    )
}

export default Group;

我还添加了状态的显示方式。可以看到，点击Group的时候，group_isOpen属性变成了true，但是这个只有在我关闭再重新打开DropDown后才会显示

减速机代码：

import personsUtils from '../utils/personsUtils';
import { GET_ALL_PERSONS, TOGGLE_VISIBLE_POSITION } from "./types"


const initialState = {
    mainStatePersons: [],
    structurePersons: []
}

export const persons = (state=initialState, action) => {
    switch(action.type) {
        case GET_ALL_PERSONS:
        const persons = personsUtils.setId(action.allPersons)
        const positions = personsUtils.getPositionsPerson(persons);
        return {
            ...state,
            mainStatePersons: persons,
            structurePersons: positions
        }
        
        case TOGGLE_VISIBLE_POSITION:
        state.structurePersons.some((item) => {
            if (item.group_id === action.id) {
                item.group_isOpen = !item.group_isOpen;
                return true
            }
            return false
        })
        return {
            ...state
        }
        default:
            return state
    }
}

我试图在三个元素上挂起事件处理程序。因此，当访问handleScrollGallery（事件）函数时，上下文会丢失并且仅在这个窗口中。告诉我如何指向我与之交互的特定元素？出于某种原因，我无法处理绑定

function handleScrollGallery(event) {
    console.log(this)
}

Array.from(gallerySliders).forEach((item) => {
    item.addEventListener('wheel', (evt) => {
        handleScrollGallery(evt)
    })
})