Проблема с обновлением состояния с помощью useEffect

Question

Я хочу обновить свое состояние (список объектов), и у меня проблема с useEffect или deleteFunction. Вот мой код:

const [itemName, setItemName] = useState({});
const [isDeleted, setIsDeleted] = useState(false);

const createArray = () => {
   const { items } = item;
   const newNames = items.map(item => item);
   setItemName({ ...newNames });
 };


useEffect(() => {
      getItems();
      createArray();
    }, [isDeleted]);

const onDeleteClick = id => {
  deleteItem(id);
  setIsDeleted(!isDeleted);
};

console.log(itemName);

    return(
// Contaners and other things//
    item.items.map({id, name, content}, index) =>{
    // Some other code also Form and FormGroup etc. //
    <Button
       style={{
         position: "absolute",
         left: "100%",
         marginLeft: "-2.2rem",
         marginTop: "-0.8rem"
        }}
       color="danger"
       size="md"
       onClick={onDeleteClick.bind(this, _id)}
       >&times;
     </Button>
// rest of code

Вот действие deleteItem:

export const deleteItem = id => (dispatch, getState) => {
  axios
    .delete(`/api/items/${id}`, tokenConfig(getState))
    .then(res =>
      dispatch({
        type: DELETE_ITEM,
        payload: id
      })
    )
    .catch(err =>
      dispatch(returnErrors(err.response.error, err.response.status))
    );
};

и преобразователь регистра DELETE_ITEM:

case DELETE_ITEM:
      return {
        ...state,
        items: state.items.filter(item => item._id !== action.payload)
      };

Проблема заключается в том, что после первого нажатия «itemName»не изменился, но через секунду он работает. Так, например, на старте у меня есть 10 объектов, после нажатия «Удалить» у меня должно быть 9 из них, но у itemName их 10, позднее число объектов - это еще одно, чем у объекта itemName.

При запуске: при запуске

При первом нажатии: при первом нажатии

При втором нажатии: привторой щелчок

В итоге у меня 0 объектов, но 1 объект в itemName. Элементы в списке визуально исчезают при этом, но если я удаляю некоторые элементы и пытаюсь изменить имя или содержимое других элементов, возникает проблема с корректировкой данных для корректного элемента.

А вот действие getItems:

export const getItems = () => dispatch => {
  dispatch(setItemsLoading());
  axios
    .get('/api/items')
    .then(res =>
      dispatch({
        type: GET_ITEMS,
        payload: res.data
      })
    )
    .catch(err =>
      dispatch(returnErrors(err.response.error, err.response.status))
    );
};

и корпус редуктора:

 case GET_ITEMS:
      return {
        ...state,
        items: action.payload,
        loading: false
      };

Answer 1

Хорошо. Попробуйте извлечь элемент при монтировании:useEffect и useState для этого случая

const itemName = useMemo( () => {
        const { items } = item;
        return items.map(item => item);
}, [item.items])

Answer 2

Вот весь компонент:

import React, { useEffect, useState } from 'react';
import {
  Container, ListGroup, ListGroupItem, Button, Form,
  FormGroup,
  Label,
  Input
} from 'reactstrap';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { connect } from 'react-redux';
import { getItems, deleteItem, updateItem } from '../actions/itemActions';
import PropTypes from 'prop-types';

const MyList = ({ getItems, deleteItem, isAuthenticated, item, updateItem }) => {

  const [itemName, setItemName] = useState({});
  const [isDeleted, setIsDeleted] = useState(false);

  const createArray = () => {
    const { items } = item;
    const newNames = items.map(item => item);
    setItemName({ ...newNames });
  };



  useEffect(() => {
    getItems();
    createArray();
  }, [isDeleted]);




  const onChangeName = (item, index) => {
    return (event) => {
      const name = event.target.value;
      setItemName(prevObjs => ({ ...prevObjs, [index]: { ...item[index], name } }));
      console.log(itemName);
    }
  }
  const onChangeContent = (item, index) => {
    return (event) => {
      const content = event.target.value;
      setItemName(prevObjs => ({ ...prevObjs, index: { ...item[index], content } }));
    }
  }

  const onDeleteClick = id => {
    deleteItem(id);
    setIsDeleted(!isDeleted);
  };

  console.log(itemName);


  return (
    <Container>
      <div className="mb-3"></div>
      <ListGroup>
        <TransitionGroup >
          {item.items.map(({ _id, name, content, date }, index) => (
            < CSSTransition key={_id} timeout={500} classNames="fade" >
              <ListGroupItem className="mb-3">
                {isAuthenticated ?
                  <div>
                    <Form onSubmit={e => {
                      e.preventDefault();
                      const { name, content } = itemName[index];
                      const newItem = {
                        name,
                        content
                      }
                      // Add item via addItem action
                      updateItem(_id, newItem);
                    }}
                    >
                      <FormGroup>
                        <Button
                          style={{
                            position: "absolute",
                            left: "100%",
                            marginLeft: "-2.2rem",
                            marginTop: "-0.8rem"
                          }}
                          color="danger"
                          size="md"

                          onClick={onDeleteClick.bind(this, _id)}
                        >&times;
                  </Button>
                        <Label for="item">Header</Label>
                        <Input
                          type="text"
                          name="name"
                          id="item"
                          defaultValue={name}
                          // value={name}
                          placeholder="Add shopping item"
                          onChange={onChangeName(itemName, index)}
                        />
                        <Label for="item">Content</Label>
                        <Input
                          type="textarea"
                          name="content"
                          id="item"
                          defaultValue={content}
                          // value={content}
                          placeholder="Add shopping item"
                          onChange={onChangeContent(itemName, index)}
                        />
                        <Button
                          color="dark"
                          style={{ marginTop: '2rem' }}
                          block>
                          Change
                </Button>
                      </FormGroup>
                    </Form>
                  </div> :
                  <div>
                    <h2>{name}</h2>
                    <p>{content}</p>
                    <p>{date.replace("T", " ").slice(0, -8)}</p>
                  </div>
                }
              </ListGroupItem>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </ListGroup>
    </Container>
  );
}

MyList.propTypes = {
  getItems: PropTypes.func.isRequired,
  item: PropTypes.object.isRequired,
  isAuthenticated: PropTypes.bool
}

const mapStateToProps = (state) => ({
  item: state.item,
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(
  mapStateToProps,
  { getItems, deleteItem, updateItem }
)(MyList);