如何将状态正确设置为对象数组？

Question

我有一个数组ob对象，这些对象根据它们的数量创建Close按钮。当我单击Close按钮时，我希望阵列进行更新（删除），然后按钮元素将从屏幕上消失。

我已经在console.log中解决了问题，但无法正确执行setState :(

此处的示例代码：https://codesandbox.io/s/sharp-kilby-hn2d9

任何帮助将不胜感激，我相信这只是setState的格式，我需要正确地执行它，但是因为它包含对象的数组，所以我无法弄清楚。

Answer 1

这里是您的handleclick函数被重写，您根据需要对其进行了修改后忘了返回状态：

  handleClick = i => {
    this.setState(state => {
      var newState = {allProjects: []};
      for (let z = 0; z < state.allProjects.length; z++) {
        const element = state.allProjects[z].employees;
        const items = element.filter(item => item !== i);
        console.log('filter', items);
        console.log('===========');
        newState.allProjects[z] = Object.assign({}, state.allProjects[z]);
        newState.allProjects[z].employees = items;
      }
      return newState;
    });
  };

Answer 2

这里是对您的代码的修改。如果我正确阅读了您的问题，则您要单击相应的“关闭”按钮后将雇员从州中删除。根据您的架构，我建议您确定要删除哪个项目雇员，以防在多个项目中可以拥有相同的雇员。如果不是这样，请随时忽略该更改。我还建议您使用employee.id进行过滤，因为您有过滤器，而不是依赖于对象相等性，这将导致您走上一条黑暗的道路（难以调试/测试）。

const allProjects = [
  {
    project_id: '1',
    name: 'Project1',
    employees: [
      {
        id: 1,
        name: 'Name 1'
      },
      {
        id: 2,
        name: 'Name 2'
      }
    ]
  },
  {
    project_id: '2',
    name: 'Project2',
    employees: [
      {
        id: 3,
        name: 'Name 3'
      },
      {
        id: 4,
        name: 'Name 4'
      }
    ]
  }
]

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      allProjects
    }
  }

  handleClick = (project_id, employeeToRemove) => {
    this.setState({
      allProjects: this.state.allProjects.map(project =>
        project.project_id === project_id
          ? {
              ...project,
              employees: project.employees.filter(employee => employee.id !== employeeToRemove.id)
            }
          : project
      )
    })
  }

  renderFooter = ({project_id, employees}) => (
    <div>
      {employees.map(employee =>
        <div key={employee.id}>
          {employee.name}
          <button
            type="button"
            onClick={() => {
              this.handleClick(project_id, employee);
            }}
          >
            Close
          </button>
        </div>
      )}
    </div>
  )

  render() {
    return (
      <div className="flex-container">
        {this.state.allProjects.map(project =>
          <div key={project.project_id} className="flex-items">
            <div>{project.name}</div>
            <div>{this.renderFooter(project)}</div>
          </div>
        )}
      </div>
    )
  }
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.flex-items>div {
  background-color: #00aeff;
  padding: 10px 20px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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