javascript - React 组件不会使用相同的 props 重新渲染，但子状态会发生变化

Question

我有以下问题:我有父组件(按钮在哪里，以及要渲染的子组件数组)。

我向每个 child 传递 Prop ， child 将其用作状态，然后更改它。问题是 children 不会重新渲染。

由于它可能看起来难以理解，这里有一些更清楚的内容(我希望):

这是 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;

所以基本上子组件会渲染，并将其“open”设置为 false，当我再次点击按钮时我希望再次展示 child ，但什么也没发生。

子级渲染的东西几秒钟后就会消失。

Answer 1

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

您正在使用索引作为键。请尝试使用唯一的 key 。例如。 child ID 或随机哈希码。

如果 key 是唯一的且是新的，它将重新渲染。现在它不会重新渲染，因为 key 是相同的。

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