React State возвращает несинхронизированные данные - PullRequest
Новая
       7

React State возвращает несинхронизированные данные

0 голосов
/ 26 февраля 2019

У меня есть следующий компонент, который использует перехватчики React: 

import React, {useState} from 'react';

// import components
import TagManagementRow from './TagManagementRow';

const TagManagementList = (props) => {

  const [tagData, setTagData] = useState(props.data);

  const deleteAction = (id) => {
    // Call to backend to delete tag
    const currentData = [];

    for( var i = 0; i <= tagData.length; i++){

      if(i < tagData.length && tagData[i].id !== id) {
        currentData.push(tagData[i]);
      }

      if(i === tagData.length) setTagData(currentData);
    };
  };

  return (
    <ul className="tagManagement">
      {tagData.map( (tag,i) => {
        return <TagManagementRow name={tag.name} key={i} id={tag.id} delete={() => deleteAction(tag.id)} />
      })}
    </ul>
  );
}

export default TagManagementList;

Он отображает 4 дочерних компонента TagManagementRow, каждый из которых имеет кнопку удаления.Когда я нажимаю кнопку удаления, все выглядит хорошо, если я выхожу из измененного состояния на консоль, однако в реальном браузере последний элемент в списке удаляется.Я чувствую, что это какая-то проблема рендеринга / синхронизации, но я не могу понять это.Любая помощь от тех, кто лучше понимает хуки, будет принята с благодарностью.

Кстати, вот код для компонента TagManagementRow: 

import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const TagManagementRow = (props) => {

  const [editTag, setEdit] = useState(false);
  const [tagName, setTagName] = useState(props.name);
  const [tempName, setTempName] = useState('');

  const handleEdit = (e) => {
    setTempName(e.target.value);
  };

  const switchToEdit = () => {
    setEdit(!editTag);
  }

  const saveEdit = () => {
    setTagName(tempName);
    setTempName('');
    switchToEdit();

  }

  return (
    <li>
        <span>
          {tagName}
          <FontAwesomeIcon icon={["fas","pen"]} onClick={switchToEdit} />
        </span>

      <span>
        <FontAwesomeIcon icon={["fas","trash-alt"]} onClick={props.delete} />
      </span>
    </li>
  );
}

export default TagManagementRow;

1 Ответ

0 голосов
/ 26 февраля 2019

Вместо обновления состояния внутри цикла, вы можете использовать filter для фильтрации объекта с соответствующим идентификатором.

Также убедитесь, что вы используете tag.id в качестве key вместо массиваиндекс, так как он будет меняться при удалении элемента. 

const { useState } = React;

const TagManagementList = props => {
  const [tagData, setTagData] = useState(props.data);

  const deleteAction = id => {
    setTagData(prevTagData => prevTagData.filter(tag => tag.id !== id));
  };

  return (
    <ul className="tagManagement">
      {tagData.map((tag, i) => {
        return (
          <TagManagementRow
            name={tag.name}
            key={tag.id}
            id={tag.id}
            delete={() => deleteAction(tag.id)}
          />
        );
      })}
    </ul>
  );
};

const TagManagementRow = props => {
  const [editTag, setEdit] = useState(false);
  const [tagName, setTagName] = useState(props.name);
  const [tempName, setTempName] = useState("");

  const handleEdit = e => {
    setTempName(e.target.value);
  };

  const switchToEdit = () => {
    setEdit(!editTag);
  };

  const saveEdit = () => {
    setTagName(tempName);
    setTempName("");
    switchToEdit();
  };

  return (
    <li>
      {tagName}
      <button onClick={props.delete}>Delete</button>
    </li>
  );
};

ReactDOM.render(
  <TagManagementList data={[{ id: 1, name: "foo" }, { id: 2, name: "bar" }]} />,
  document.getElementById("root")
);
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
...