React父组件保存数据子组件展示数据,子组件数据重复显示

Question

我编写了一个demo在父组件中进行保持数据，然后在子组件中进行显示，我暑假保存成功了但是点击不同的列表项，显示的数据都是一样的好像没有更新，没有销毁，也没有重新加载，使用了钩子函数也不行。

父组件保持数据的方法
import { Avatar, List,Collapse  } from 'antd';
import React, { useState } from 'react';
import { PlusCircleOutlined,SolutionOutlined,DeleteOutlined } from '@ant-design/icons';
import SolutionComponets from './SolutionComponets';

const handleSave = (formData) => {
    const newAttributeData = { ...AttributeData, ...formData };
      // 将新数据与旧数据合并，不替换旧数据
      setAttributeData({...newAttributeData});
    const newNode = {
        title: (
          <span>
            {`${formData.newNodeName}`}
            <DeleteOutlined onClick={(event) => handleDelete(`${formData.newNodeNo}-${formData.newNodeName}`, event)} />
          </span>
        ),
        value: `${formData.newNodeNo}-${formData.newNodeName}`, // 使用相同格式作为 value
        children: [
          { title: `${formData.ProjecTtype}-${formData.Parentlevel} `, value: `${randomId}-1` },
          { title: <PlusCircleOutlined onClick={showModalForm} />, value: `${formData.newNodeNo}-${formData.newNodeName}-2`, children: [] }
        ]
      }; 
      setListData([...listData, newNode]); // 将新节点对象附加到现有列表数据中 
      setSelectedNode(newNode); // 将新节点设置为当前所选节点
    };
子组件引用
  return(

 <div>
  <SolutionComponets
  visible={isModalOpenBaic} AttributeData={AttributeData} 
  onClose={handleCloseModalBasic}
  
  />
        <List style={{width:'50%'}}
    itemLayout="horizontal"
    dataSource={listData}
    renderItem={(item, index) => (
    <Collapse bordered>
      <Panel header={item.title} key={index}>
        <List.Item.Meta
          avatar={<Avatar src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`} />}
          description="This is a solution project for generating Word documents"
        />
        <PlusCircleOutlined onClick={showModalForm} style={{ marginLeft: '20px', marginRight: '10px' }} />
        <SolutionOutlined onClick={showModalBaisc} />
      </Panel>
    </Collapse>

    )}
  />
    </div>
    );
子组件
import { Drawer } from 'antd';
import React, { useState, useEffect } from 'react';

function SolutionComponents({ visible, onClose, AttributeData }) {
 
    const handleCloseDrawer = () => {
   onClose();
 };

 return (
   <>
     <Drawer title="窗体属性" visible={visible} placement="right" onClose={handleCloseDrawer}>
       <p>{AttributeData ? AttributeData.newNodeNo : ''}</p>
       <p>{AttributeData ? AttributeData.newNodeName : ''}</p>
       <p>{AttributeData ? AttributeData.ProjecTtype : ''}</p>
       <p>{AttributeData ? AttributeData.Parentlevel : ''}</p>
     </Drawer>
   </>
 );
}

export default SolutionComponents;
我要实现点击不同列表展示不同列表数据

Answer 1

如果React父组件保存数据，子组件展示数据时出现重复显示的情况，可能是因为子组件未正确使用props接收和展示数据，或者在子组件中对数据进行了错误处理。以下是一些可能导致这个问题的原因和解决方法：

1. 父组件传递给子组件的数据未正确声明和使用。

在父组件中，需要确保将数据作为props传递给子组件，并且在子组件中正确地声明和使用这些props。例如，如果要将名称为data的数据传递给子组件，在父组件中应该像这样传递它：

<MyComponent data={myData} />

在子组件中，可以通过props属性来访问这些数据：

function MyComponent(props) {
  return <div>{props.data}</div>;
}

1. 子组件在渲染数据时发生了错误。

如果子组件在渲染数据时发生了错误，可能会导致数据重复显示。例如，如果正在使用数组中的数据来渲染列表项，则可能需要确保在循环期间使用唯一的key属性。否则，React将无法确定哪些元素已被添加、更改或删除，并会重新渲染整个列表。例如：

function MyListComponent(props) {
  return (
    <ul>
      {props.data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

1. 数据重复保存在父组件中。

如果数据重复显示，可能是因为数据重复保存在父组件中。在这种情况下，需要确定何时和如何存储数据，并确保只有一个版本的数据可供使用。例如，如果正在从API或其他源动态加载数据，则可能需要将数据存储在Redux store或使用React Hooks来管理它们。