Question

我想重用已经在另一个页面中工作的页面，并在用户单击某个项目时将其显示在右侧。使用下面的代码，产品名称在点击时正确显示，但 ItemDisplayPage 仅在第一次点击时呈现，并且不会在进一步点击时更新。我曾尝试将它用作 UseState、UseRef、在 UseEffect 中更新、在处理程序中，似乎没有任何效果。

我做错了什么？

  const [auctionClicked, setClicked] = useState(false);

  const [displayedItem, setDisplayed] = useState({} as AuctionItem);

  const [displayPage, setDisplayPage] = useState(<Col></Col>);

  let content = useRef(
.
.
  );
.
.
.
  useEffect(() => {
    if (auctionClicked) {
      setDisplayPage(<Col>{displayedItem.product.name}<ItemDisplayPage auction={displayedItem} /></Col>);
    }
  }, [displayedItem]);

  useEffect(() => {
    
  }, [displayPage])

  const handleClick = (item: AuctionItem) => {
    setClicked(true);
    setDisplayed(item);
  };

  content.current = (
    <Container>
      <Row>
        {left.current}
        {displayPage}
      </Row>
    </Container>
  );

  return content.current;

The problem visualized

Answer 1

我建议您不要使用 React 组件作为状态。您可以使用字符串代替它。

我的想法是

const [displayPage, setDisplayPage] = useState('initial');

然后通过名称获取需要的组件

return <Container>
      <Row>
        {getContentByName(displayPage)}
      </Row>
    </Container>

当状态改变时，React 不会用新的 props 重新渲染组件

1 个答案: