Question

这是我的第一个问题,请与我一起回答。 I m从事一项SPA React项目,该项目跟踪农场及其相关床位,并可使用一些帮助。我愿通过用Params(Params)(而不是向农场/农场(id)提出更多的要求,对最初的州进行过滤,从而提供有关农场尾页的一些数据。我已提出1英寸的请求,并在所有护堤变量中挽救了最初状态。我用回旋-地把一些链接带走,利用被点击的农场的id走一条道路。

迄今为止,该构成部分已翻了两番,在第二次通过时,我使用的log(农场)确实产生了正确的农田。从那时起,由于I m没有确定国家,而该构成部分已经使回报值变得空白,从农场={}起,它就不再保留。

import { useParams } from "react-router-dom";

function FarmDetail({ allFarms, setAllFarms }) {
  console.log("render");

  let { id } = useParams();
  id = parseInt(id);

  let farm = {};

  useEffect(() => {
    if (allFarms) {
      farm = [...allFarms].find((f) => f.id === id);
    }
    console.log(farm);
  }, [allFarms]);

  console.log(farm);
  console.log(allFarms);

  return (
    <div>
      <p>{farm.name}</p>
    </div>
  );
}

export default FarmDetail;

我试图将国家用于农田变数,并设定使用国,以引发再耕,但随着农场被设定为不明确,我从来不会引发使用的效果。所有的护堤也只是一片空洞,我不明白为什么。我最后看着一种类型错误:不能读到对我来说具有意义的未经界定的特性(“名称”),因为农场仍然未如此界定。我感到很接近,但我在这里没有东西。任何帮助都受到高度赞赏!

Answer 1

这里不需要影响,因为没有副作用。

您可以做的是:https://react.dev/vis/react/useMemo”rel=“nofollow noreferer”>memo-ise 。 <代码>id>/code>/ allFarms

const farm = useMemo(() => allFarms?.find((f) => f.id === id), [id, allFarms]);

这将重新计算<代码>farm。页: 1

即便如此,如果对<条码>的改动造成<条码>详细设计/条码>部分的重发,也不一定需要改动。如果是的话,你甚至可以更简单地利用以下手段:

const farm = allFarms?.find((f) => f.id === id);

如果<代码>allFarms不是一阵,或id未出现,则该编码可退回un defined。

if (!farm) {
  return <p className="alert warning">Not found</p>;
}

Answer 2

I saw your code. And I am agree with Phil s answer. You can use useMemo hook instead of 使用效果. And by the way, the reason, you component renders twice, is that first your component renders (with initial allFarms data) sencod your component renders (with fetched allFarms data)

因此,你的构成部分造成空白,是你提到:

let farm = {};

inside your component. So every re-render, farm will initialized as blank {} but

使用效果

只有在所有护堤变数发生变化时,才算起。

希望这一答案有助于。

友情链接