상태를 업데이트할 때 React 구성 요소가 다시 렌더링되지 않습니다.

Question

이 문제에 대한 더 나은 해결책이 있다고 생각합니다. 내 고양이 개체 배열이 포함된 파일이 있습니다.

var 카테고리 = [
  {
    "ID": 1,
    "name": "팩토리",
    "선택됨": 거짓
  },
  {
    "ID": 2,
    "name": "전화 통신",
    "선택됨": 거짓
  },
  {
    "ID": 3,
    "name": "컴퓨터",
    "선택됨": 거짓
  },
  {
    "ID": 4,
    "이름": "Rachunkowośc",
    "선택됨": 거짓
  },
  {
    "ID": 5,
    "name": "금융",
    "선택됨": 거짓
  }
];

다음이 있습니다:

<ul className="category">
  {this.state.categories.map((item,index) =>
    <li onClick={()=>this.filterCategory(item,index)} key={item.id} className={item.selected? 'active' : ''}>{item.name}< /li>
  )}

<p>내 filterCategory 함수: </p>
<pre class="brush:php;toolbar:false;">filterCategory(item,index) {
  this.state.categories[index].selected = !this.state.categories[index].selected;
  this.forceUpdate();
}

forceUpdate()를 사용하지 않고 이를 어떻게 구현할 수 있는지 아시나요? 스택에서 this.forceUpdate() 사용을 피해야 한다는 내용을 읽었습니다.

Answer 1

상태를 직접 수정하지 마세요

상태 변경에는 setState 메소드를 사용하세요.

Answer 2

setState会自动触发重新渲染，所以不要直接修改状态，而是使用setState를 사용하여 상태를 업데이트하세요.

으아악

문서에 따르면: