React组件不会使用相同的props进行渲染,但是子状态会发生变化

问题描述 投票:0回答:2

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

向每个孩子传递道具,孩子将其用作状态,然后对其进行更改。问题是孩子们不退缩。

似乎无法理解,这是更清晰的(我希望):

这是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,当我再次单击按钮时我希望再次展示孩子,但什么也没发生。

儿童渲染出几秒钟后消失的东西。

javascript reactjs react-native
2个回答
0
投票

看起来您的组件似乎没有以任何有意义的方式链接。单击My Class组件上的按钮将更新something状态,但是该状态不会传递给Child组件。

类似地,SomeComponent组件处理其自身的关闭,并通过Child告诉handleClose组件它已关闭-但这不会传递给父级,并且父级或Child都不会传递任何打开状态到SomeComponent

更改Child上的某些状态不会重新呈现其自己的孩子。为了实现这一点,必须传递一些新的东西作为支持。


0
投票

键可帮助React确定哪些项目已更改,添加或为删除。键应赋予数组内的元素以给出元素具有稳定的身份。

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

如果密钥是唯一的且是新密钥,它将重新呈现。现在,由于密钥相同,因此它不会重新渲染。

[签出:https://reactjs.org/docs/lists-and-keys.html#keys

© www.soinside.com 2019 - 2024. All rights reserved.