객체 배열인 상태를 매핑할 때 구성요소를 다시 렌더링하는 방법

객체 배열인 상태를 매핑할 때 구성요소를 다시 렌더링하는 방법

나는 상태에 있는 일련의 물체들을 매핑하려고 하는데, 그 상태에서 두 개의 반응 요소들 중 하나를 조건부로 반환하는 것이다.그런 다음 어느 시점에서 그 상태를 변경하고, 물체의 상태가 변경되면 구성요소가 다시 렌더링될 것으로 예상할 수 있다.내 문제가 리액션의 변화를 인식하지 못하는 것과 관련이 있다는 것은 이해하지만, 이 작업을 수행하려면 왜 어떤 패턴으로 변경해야 하는지 잘 모르겠어.

여기 코드펜: https://codepen.io/steven-harlow/pen/KKPLXRO

여기서 나온 암호는 다음과 같다.

const App = (props) => {
  const [todos, setTodos] = React.useState([
    {name: 'A', done: false},
    {name: 'B', done: false},
    {name: 'C', done: false},
  ])

  React.useEffect(() => {

  }, [todos])

  const handleClick = (name) => {
    const index = todos.find(todo => todo.name == name)
    let tempTodos = todos;
    tempTodos[index].done = true;
    setTodos(tempTodos);
  }

  return (
    <div>
      <h1>Hello, world!</h1>
      <div>
        {todos.map(todo => {
          return todo.done ? (<div key={'done' + todo.name}>{todo.name} : done</div>) : (<div onClick={() => handleClick(todo.name)} key={'notdone' + todo.name}>{todo.name} : not done</div>)
        })}
      </div>
    </div>
  )
}

자, 이제 여기 있는 게 네게 효과가 있을 거야.나는 거기에 메모를 몇 개 추가했다.

const App = (props) => {
  const [todos, setTodos] = React.useState([
    {name: 'A', done: false},
    {name: 'B', done: false},
    {name: 'C', done: false},
  ])

  const handleClick = (name) => {
    /*
      Here you were using todos.find which was returning the object. I switched
      over to todos.findIndex to give you the index in the todos array. 
    */
    const index = todos.findIndex(todo => todo.name === name)
    /*
      In your code you are just setting tempTodos equal to todos. This isn't
      making a copy of the original array but rather a reference. In order to create 
      a copy I am adding the .slice() at the end. This will create a copy.
      This one used to get me all of the time.
    */
    let tempTodos = todos.slice();
    tempTodos[index].done = true;
    setTodos(tempTodos);
  }
  console.log(todos)
  return (
    <div>
      <h1>Hello, world!</h1>
      <div>
        {todos.map((todo,index) => {
        return todo.done ? (<div key={index}>{todo.name} : done</div>) : (<div onClick={() => handleClick(todo.name)} key={index}>{todo.name} : not done</div>)
        })}
      </div>
    </div>
  )
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);

또 한 가지 내가 한 일은 지도가 만든 칸의 열쇠를 단순화한 것이었다.방금 지도에 색인을 추가해서 키로 사용했는데, 그렇게 하면 훨씬 깨끗해진답니다.

이것이 도움이 되기를!

새 배열을 만들지 않으면 상태가 변경된 것으로 표시되지 않음.

const handleClick = n => setTodos(todos.map(t => t.name === n ? {...t, done: true} : t));

참조URL: https://stackoverflow.com/questions/58151577/how-to-re-render-react-component-when-mapping-over-state-that-is-array-of-object