React子组件AlertC无法打印props问题求助

问题根源 #

核心问题出在React的重渲染机制上：

• 你定义的test是普通JavaScript数组，直接调用test.push(<AlertC ... />)修改数组时，React无法感知到这个变化，因此不会触发组件重渲染。这意味着你push进去的AlertC组件从未被实际渲染到DOM中，自然组件内部的console.log(props)不会执行。
• 反观List组件能正常输出props，是因为ListForm中的list数组是在组件每次渲染时重新生成的——当你调用props.listHandler添加新数据后，props.list发生变化，ListForm会重新渲染，list数组会重新生成并渲染List组件，所以List的console.log能正常触发。

解决方案 #

要让AlertC组件被渲染并输出props，你需要用**React状态（state）**来管理提示组件的列表，因为只有state或props变化时，React才会触发重渲染。

方法1：用state存储组件元素（简单直接） #

import { useState } from 'react';

// 在组件内部定义状态
const [alerts, setAlerts] = useState([]);

return (
<>
  <Form
    onSubmit={(e) => {
      e.preventDefault();
      if (props.title !== "") {
        // 通过setAlerts更新状态，创建新数组（不要直接修改原数组）
        setAlerts(prevAlerts => [...prevAlerts, <AlertC message="thankyou" state={true} />]);
        props.listHandler({ title: props.title, content: props.content });
      }
    }}
  >
    {/* 渲染状态中的AlertC组件 */}
    {alerts}
  </Form>
</>
)

方法2：用state存储数据，渲染时生成组件（更符合React最佳实践） #

直接存储组件元素在state里不够灵活，推荐存储提示的核心数据，再在渲染阶段生成组件：

import { useState } from 'react';

const [alerts, setAlerts] = useState([]);

return (
<>
  <Form
    onSubmit={(e) => {
      e.preventDefault();
      if (props.title !== "") {
        // 存储提示数据而不是组件
        setAlerts(prevAlerts => [...prevAlerts, { message: "thankyou", state: true }]);
        props.listHandler({ title: props.title, content: props.content });
      }
    }}
  >
    {/* 遍历数据生成AlertC组件 */}
    {alerts.map((alertData, index) => (
      <AlertC 
        key={index} 
        message={alertData.message} 
        state={alertData.state} 
      />
    ))}
  </Form>
</>
)

额外注意点 #

AlertC组件内部的show状态默认是false，即使组件渲染成功，Alert提示框默认也是隐藏的，但这不会影响console.log(props)的执行——只要组件被渲染，控制台就会输出props。

内容的提问来源于stack exchange，提问作者JungsuRy