从商店渲染子组件答案

【问题标题】：Rendering Child Component from store从商店渲染子组件
【发布时间】：2022-11-18 00:10:07
【问题描述】：

我有一个包含子组件的组件，我想用不同的 ID 渲染这些子组件。他们从商店获取数据。问题是它们被渲染但具有相同的项目。如何解决？

多图组件

const MultiImages: () => JSX.Element = () => {
  const values = ['500', '406', '614'];

  return ( 
      <div>
        {values.map((val, index) => {
          return <OneImage key={index} projectID={val} />;
        })}
      </div>
  );
};

export default MultiImages;

OneImage 组件

const OneImage: () => JSX.Element = ({ projectID }) => {
  const projectData = useProjectDataStore();
  const { getProject } = useAction();
  useEffect(() => {
    getProject(projectID ?? '');
  }, []);

  return (
    <>
      <div> 
            <img
              src={projectData.picture}
              }
            />
          <div>
            <a>
              {projectData.projectName}
            </a>
          </div>
      </div>
    </>
  );
};

export default OneImage;

【问题讨论】：

你能试试这个语法吗getProject(pojectID && pojectID )。记录 projectID 并确保您从另一端接收 projectID。
它不是很清楚你的 getProject() 做了什么，你在用 projectData 做什么，但似乎你正在用 getProject 获取一些东西，所以你所有的图像都将是列表中的最后一个。
@AlexShtromberg 你知道怎么解决吗？
我认为你也应该分享useProjectDataStore逻辑，很难说你是如何从那个函数@NewDev中得到projectData的
@NewDev 你能确认你正在使用“getProject”和“useProjectDataStore”加载图像从你的商店获取最新结果，我（或任何先阅读消息的人）会在这里给你一个答案。现在它只是猜测。

标签： javascript reactjs typescript react-hooks

【解决方案1】：

您的组件 OneImage 将返回您案例中 return 语句中的内容：

<>
  <div> 
    <img
      src={projectData.picture}
    />
    <div>
      <a>
        {projectData.projectName}
      </a>
    </div>
  </div>
</>

您元素周围的这个标签 <></> 是一个 React.fragment 并且没有键。这就是您收到此错误的原因。因为你已经有一个 div 标签包装你的元素，你可以这样做：

<div key={projectID}> 
  <img
    src={projectData.picture}
  />
  <div>
    <a>
      {projectData.projectName}
    </a>
  </div>
</div>

如果projectID不是数字，您可以将其更改为Math.floor(Math.random() * 9999)。请注意，传递道具 key={index} 是不必要的，并且不建议使用索引作为反应列表中的键。

【讨论】：