Блог

Я довольно новичок в react и не понимаю, почему мои дочерние элементы не перерисовываются при изменении состояния. Все работает нормально, пока вы не нажмете кнопку добавления столбца. Это чертовски меняет состояние платы, и действительно, кажется, что плата перерисовывается, а столбцы — нет.

 const Board = function() {

  const [board, setBoard] = useState([]);

  useEffect(() => {
    console.log(boardJSON);
    setBoard(boardJSON.board);
  }, [])

  const addColumn = () => {
    console.log('addColumn');
    let inx = board.length   1;
    let col = {userId: 1, columnId: inx, header: 'Bob', cards: []};
    board.push(col);
    board[0].header = "Marge";
    let cardx = {"cardId": 4, "desc": "Break sound barrier", "status": "incomplete"};
    board[0].cards.push(cardx);
    board[1].cards[1].status = "destroyed";
    setBoard(board);
  };

  return (
    <div>
      <div className="board">
      {console.log("parent rerendering", board) // we get this far, but columns don't rerender          
      }
      {board.map((column) => (
        <Column key={column.columnId} column={column} />
        ))}
      </div>
      <button className="add-column-button" onClick={() => {addColumn()}}>
        <img src={plus_sm} />
        Add new column
      </button>
      {console.log("we got to the end", board) // did we get to the end?
      }
    </div>
  );
};

export default Board;
  

Вот что я получил на консоли. На экране после AddColumn ничего не меняется, и мы не получаем сообщений «rendering column». Кажется, что он просто пропускает переназначение.

 parent rerendering Array(0)
Board.js:42 we got to the end Array(0)
Board.js:11 Object
Board.js:31 parent rerendering Array(2)
Board.js:42 we got to the end Array(2)
Column.js:21 rendering column number 1
Column.js:21 rendering column number 2
Column.js:10 column rendering, props received Object
Column.js:10 column rendering, props received Object
Board.js:16 addColumn
Board.js:31 parent rerendering (3) [{…}, {…}, {…}]
Board.js:42 we got to the end (3) [{…}, {…}, {…}]
  

На случай, если вам интересно, это приложение для реагирования на dnd, но я удалил все dnd на случай, если это вызвало проблему. Этого не было.

Это потому, что вы изменяете состояние. Смотрите Эту ссылку о том, почему не следует изменять состояние реакции напрямую. Также посмотрите Этот пример, который я сделал, чтобы дать вам представление о том, что произойдет, если вы напрямую измените состояние.

В вашем случае это должно быть:

 const addColumn = () => {
    console.log('addColumn');
    let inx = board.length   1;
    let col = {userId: 1, columnId: inx, header: 'Bob', cards: []};

    const newBoardContent = [...board];

    newBoardContent.push(col);
    newBoardContent[0].header = "Marge";
    let cardx = {"cardId": 4, "desc": "Break sound barrier", "status": "incomplete"};
    newBoardContent[0].cards.push(cardx);
    newBoardContent[1].cards[1].status = "destroyed";
    setBoard(newBoardContent);
};