Reactjs，重新渲染相同的组件，但不同的 return 数据

Question

有点难以解释，但请耐心等待。

我有这个function Component。 function Component 代码几乎相同，但是我如何简化我的 function MyComponent，因为每个页面的 return 值都不同？

下面是我的代码，为了更好地理解这里是完整的沙盒代码 https://codesandbox.io/。

import { React, useState, useEffect } from "react";

function MyComponent() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch(
      "https://api.unsplash.com/search/photos?query=nature?orientation=landscape&client_id=ddIh7_ebg4KwNHzNLf3ePCZb6yIPREJ5jxG3dYgoj6U"
    )
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.results);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <div style={{ textAlign: "left" }}>
        This return has to be dynamic. See the function Home and About below.
      </div>
    );
  }
}

export default MyComponent;

这是我的主页和关于页面。

function Home() {
  const [items, setItems] = useState([]);
  return (
    <div>
      <h2>Home</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.user.last_name}</li>
        ))}
      </ul>
    </div>
  );
}

function About() {
  const [items, setItems] = useState([]);
  return (
    <div>
      <h2>About</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.user.first_name}</li>
        ))}
      </ul>
    </div>
  );
}

MyComponent 似乎没有在我的 codesandbox 中呈现，这就是为什么我问如何才能解决我的问题。

Answer 1

问题是您没有集中的事实来源。 MyComponent、Home 和 About 中的每一个都有自己的 items 状态。您要问的问题是如何将 MyComponent 获取的 items 传递给其他两个。

解决方法是Lift State Up。将所有获取和呈现逻辑从 MyComponent 移至 App。将 items 状态传递给 Home 和 About。

应用程序

export default function App() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch(
      "https://api.unsplash.com/search/photos?query=nature?orientation=landscape&client_id=ddIh7_ebg4KwNHzNLf3ePCZb6yIPREJ5jxG3dYgoj6U"
    )
      .then((res) => res.json())
      .then((result) => {
        setItems(result.results);
      })
      .catch((error) => {
        setError(error);
      })
      .finally(() => {
        setIsLoaded(true);
      });
  }, []);

  return (
    <BrowserRouter>
      {<Layout />}
      <main>
        {error ? (
          <div>Error: {error.message}</div>
        ) : !isLoaded ? (
          <div>Loading...</div>
        ) : (
          <React.Suspense fallback={<h6>Loading...</h6>}>
            <Routes>
              <Route path="/" element={<Home items={items} />} />
              <Route path="/about" element={<About items={items} />} />
            </Routes>
          </React.Suspense>
        )}
      </main>
    </BrowserRouter>
  );
}

主页

function Home({ items }) {
  return (
    <div>
      <h2>Home</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.user.last_name}</li>
        ))}
      </ul>
    </div>
  );
}

关于

function About({ items }) {
  return (
    <div>
      <h2>About</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.user.first_name}</li>
        ))}
      </ul>
    </div>
  );
}

Reactjs，重新渲染相同的组件，但不同的 return 数据

Reactjs, re-render same components, but different return data

reactjs

react-hooks

use-effect

use-state