React 組件不會使用相同的道具重新渲染，但子狀態會發生變化

Question

我有以下問題：我有父組件（按鈕在哪里，以及要呈現的子組件數組）。

我向每個孩子傳遞道具，孩子將其用作狀態，然后更改它。 問題是孩子們不會重新渲染。

由於它似乎無法理解，這里有一些更清楚的東西（我希望）：

這是 child.js 的簡化版本

export default function ChildComponent(props) {
  const [open, setOpen] = React.useState(props.open);

  const handleClick = () => {
    setOpen(true);
  }; /* i actually never use handleClick */

  const handleClose = (event) => {
    setOpen(open => !open);
  };

  return (
    <div>
        <SomeComponent hideAfterTimeMs={1000} onClose={handleClose}/>
    </div>
  );
}

家長：

import React from "react";
import Child from "./demo";

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      something: false,
    };
  }

  displayKids = () => {
    const a = [];
    for (let i = 0; i < 1; i++) {
      a.push(<Child open={true} key={i} message={"Abcd " + i} />);
    }
    return a; 
  };

  handleChange = e => {
    this.setState(prevState => ({
      something: !prevState.something,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleChange}>Nacisnij mnie</button>
        {this.displayKids()}
      </div>
    );
  }
}
export default MyClass;

所以基本上子組件呈現，並將其“打開”設置為false，當我再次單擊按鈕時，我希望再次顯示子組件，但沒有任何反應。

Child 渲染幾秒鍾后消失的東西。

Answer 1

鍵幫助 React 識別哪些項目已更改、添加或刪除。 應該為數組內的元素提供鍵，以賦予元素一個穩定的身份。

您正在使用索引作為鍵。 請嘗試使用唯一鍵。 例如子ID或隨機哈希碼。

如果密鑰是唯一的並且是新的，它將重新呈現。 現在它不會重新渲染，因為鍵是相同的。

查看： https : //reactjs.org/docs/lists-and-keys.html#keys

Answer 2

看起來您的組件沒有以任何有意義的方式鏈接。 單擊My Class組件上的按鈕會更新something狀態，但該狀態不會傳遞給Child組件。

類似地， SomeComponent組件處理自己的關閉，並通過handleClose告訴Child組件它已關閉——但這不會傳達給父組件，父或Child SomeComponent任何打開狀態傳達給SomeComponent 。

更改Child某些狀態不會重新渲染它自己的孩子。 必須通過一些新的東西作為道具才能發生這種情況。