此处的myDisplay为什么不随着父组件传入isDIsplay值改变而改变？

Question

此处的myDisplay为什么不随着父组件传入isDIsplay值改变而改变？

Answer 1

【以下回答由 GPT 生成】

问题的原因是在AlertBox组件中使用了useState来定义myDisplay状态，但是useState只在组件首次渲染时被调用，并且将初始状态值赋给变量myDisplay。之后，myDisplay的值保持不变，不会受到父组件传入的isDisplay值的变化影响。

解决这个问题的方法是使用React的生命周期方法来监听父组件传入的isDisplay值的变化，并在变化时更新myDisplay的值。

具体的解决方案如下：

1. 在AlertBox组件中引入useEffect和useState:

import React, { useEffect, useState } from 'react';

1. 在AlertBox组件中定义一个新的状态变量myDisplay，并将其初始值设置为props传入的isDisplay值：

const [myDisplay, setMyDisplay] = useState(props.isDisplay);

1. 使用useEffect监听props传入的isDisplay值的变化，并在变化时更新myDisplay的值：

useEffect(() => {
  setMyDisplay(props.isDisplay);
}, [props.isDisplay]);

完整的代码如下：

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { useRef } from 'react';
import MyAlert from '../components/MyStyles';
import { changeAgeAction, changeNameAction } from '../redux/home/studentAction';

export function AlertBox(props) {
  const student = props.stuArre;
  const contentArr = Object.keys(student);
  const nameText = useRef();
  const ageText = useRef();
  const alertBoxText = useRef();
  const { isDisplay, ID = props.ob } = props;

  const [myDisplay, setMyDisplay] = useState(props.isDisplay);

  useEffect(() => {
    setMyDisplay(props.isDisplay);
  }, [props.isDisplay]);

  const confirmText = (e) => {
    console.log(ageText.current.value);
    console.log(nameText.current.value);
    e.target.parentNode.parentNode.style.display = none;
    ageText.current.value = '';
    nameText.current.value = '';
  };

  const mouseEnter = (e) => {
    // 执行操作
  };

  // 其他代码...

  return (
    // 组件返回的JSX代码...
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(AlertBox);

通过上述方法，就能实现当父组件传入的isDisplay值发生变化时，AlertBox组件中的myDisplay状态也会随之变化。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^