無法在導入的 React 功能組件上使用道具

Question

我正在嘗試獲取一個組件（TestCard）來呈現我使用 Axios 進行的 API 調用的輸出。 當我將 TestCard 組件的代碼直接放在我的 App.js 文件的 App() 函數中時，它會按預期呈現。 但是當我將這段代碼移到它自己的函數中時，它不會呈現這些值。 這讓我感到驚訝，因為我正在調用相同的 useState 和 useEffect 函數來將來自 API 調用的數據存儲在 state 中。

我在下面列出了代碼； 我在這里做錯了什么？

這是 TestCard 組件的代碼：

function TestCard(props) {
    return (
      <Card sx={{ maxWidth: 345 }}>
      <CardActionArea>
        <CardMedia
          component="img"
          height="300"
          image={props.preview_image}
          alt={props.name} />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            {props.description}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {props.description}
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

export default TestCard

這是直接在我的 App() 函數中的代碼（正確呈現）：

function App() {
  const [props, setProps] = useState({});
  useEffect(() => {
     axios.get(`http://localhost:9000/sessions/list`).then((row)=>setProps(row.data))
  })
  return (
    <div>
        <Card sx={{ maxWidth: 345 }}>
    <CardActionArea>
      <CardMedia
        component="img"
        height="300"
        image={props.preview_image}
        alt={props.name} />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {props.description}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {props.description}
        </Typography>
      </CardContent>
    </CardActionArea>
  </Card>
    </div> 
  );
}

export default App

這是我的 App() 函數中的導入函數（未正確呈現數據）：

function App() {
  const [props, setProps] = useState({});
  useEffect(() => {
     axios.get(`http://localhost:9000/sessions/list`).then((row)=>setProps(row.data))
  })
  return (
    <div>
      <TestCard name={props.name} description={props.description} preview_image={props.preview_image} />
    </div> 
  );
}

Answer 1

我不確定這是否可能是問題，但我想它可能與 te useEffect 依賴數組有關，因為你沒有依賴數組，它會在每次渲染時調用 api，在某些情況下可能導致更多渲染，因為您正在更改狀態。 嘗試像這樣設置 useEffect

function App() {
  const [props, setProps] = useState({});
  useEffect(() => {
    axios
      .get(`http://localhost:9000/sessions/list`)
      .then((row) => setProps(row.data));
  }, []);
  return (
    <div>
      <TestCard
        name={props.name}
        description={props.description}
        preview_image={props.preview_image}
      />
    </div>
  );
}

Answer 2

首先，您需要為 useEffect 添加一個依賴項，尤其是在進行 API 調用時。 沒有它，它會在每次組件重新渲染時調用 API，這是一個無限循環。

useEffect(() => {
  axios
    .get(`http://localhost:9000/sessions/list`)
    .then((row)=>setProps(row.data))
  },[])

您的代碼的問題是您將三個屬性傳遞給 TestCard 但期望一個。 這是工作版本：

function TestCard({name, description, preview_image}) {
    return (
      <Card sx={{ maxWidth: 345 }}>
        <CardActionArea>
          <CardMedia
            component="img"
            height="300"
            image={preview_image}
            alt={name} />
          <CardContent>
            <Typography gutterBottom variant="h5" component="div">
              {description}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              {description}
            </Typography>
          </CardContent>
        </CardActionArea>
     </Card>
  );
}

export default TestCard