在React中對父組件使用過濾器時更新子組件

我以前見過這個問題，但我似乎無法用我的情況來解決這個問題。

我正在使用搜索欄來過濾資料，它可以作業，但影像不會更新。傳遞給孩子的 URL 作業正常，但它只是沒有改變它的狀態。我只是不明白如何實作它。

口袋妖怪串列.jsx

import axios from "axios";
import React, { useEffect, useState } from "react";
import PokemonSprite from "./PokemonSprite";
import Card from "@material-tailwind/react/Card";
import CardBody from "@material-tailwind/react/CardBody";
import CardFooter from "@material-tailwind/react/CardFooter";
import H6 from "@material-tailwind/react/Heading6";
import Paragraph from "@material-tailwind/react/Paragraph";
import Button from "@material-tailwind/react/Button";

// const baseURL = "https://pokeapi.co/api/v2/pokemon?limit=898";
const baseURL = "https://pokeapi.co/api/v2/pokemon?limit=20";

export default function PokemonList() {
    const [post, setPost] = useState([]);
    const [searchTerm, setSearchTerm] = useState('');

    useEffect(() => {
        axios.get(baseURL).then((response) => {
            setPost(response.data.results);
        });
    }, []);

    if (!post) return <p>Sorry, no results.</p>;

    return (
        <div>
            <input type="text" placeholder="Search..." onChange={e => {setSearchTerm(e.target.value)}}/>
            {post.filter((data) => {
                if (searchTerm == "") {
                    return data;
                } else if (data.name.toLowerCase().includes(searchTerm.toLowerCase())) {
                    console.log(data);
                    return data;
                }
            }).map((data, idx) => (
                <div className="p-5">
                    <Card key={idx}>
                        <PokemonSprite url={data.url} />
                        <CardBody>
                            <H6 color="gray">{data.name}</H6>
                            <Paragraph color="gray">
                                Don't be scared of the truth because we need to restart the human
                                foundation in truth And I love you like Kanye loves Kanye I love
                                Rick Owens’ bed design but the back is...
                            </Paragraph>
                        </CardBody>

                        <CardFooter>
                            <Button color="lightBlue" size="lg" ripple="light">
                                Read More
                            </Button>
                        </CardFooter>
                    </Card>
                </div>
            ))}
        </div>
        
    );
}

PokemonSprite.jsx

import axios from "axios";
import React, { useEffect, useState } from "react";
import CardImage from "@material-tailwind/react/CardImage";

export default function PokemonList(url) {
    const [post, setPost] = useState();

    console.log(url);

    useEffect(() => {
        axios.get(url.url).then((response) => {
        //console.log(response.data);
        setPost(response.data);
        });
    }, []);

   if (!post) return <p>Sorry, no results.</p>;
  return (
      <div>
        <CardImage
            src={post.sprites.front_default}
            alt="Card Image"
        />
      </div>
  );
}

uj5u.com熱心網友回復：

請像這樣重寫您的 PokemonSprite 組件，以啟用對 Url 更新的重新渲染...

import axios from "axios";
import React, { useEffect, useState } from "react";
import CardImage from "@material-tailwind/react/CardImage";

export default function PokemonList(url) {
    const [post, setPost] = useState();

    console.log(url);
    const getUpdatedImage = async (imageUrl) => {
        const response = await axios.get(imageUrl);
        setPost(response.data);
        return post;

    }
    useEffect(() => {
        getUpdatedImage(url.url);
    }, [url]);

   if (!post) return <p>Sorry, no results.</p>;
  return (
      <div>
        <CardImage
            src={post.sprites.front_default}
            alt="Card Image"
        />
      </div>
  );
}

標籤：javascript 反应

上一篇：react-select中的ReactJS物件陣列資料結構

下一篇：當用戶鍵入URL并轉到該事件時，如何獲取事件？