尝试使用中的空白表

Question

part of the problem is that the value entered in the input is exactly what I mean by the returned element, which is "[ ]" the expected result was to be input: Name output: Name + img etc, there is no error during the output and the returned message in the console is only [] it looks like something was missing in advance thanks for the help:)

App.js
        <div>
            <Nav />
            <DataContext>
                <Switch location={location} key={location.pathname}>
                    {routes.map(({ path, Component }) => (
                        <Route
                            key={path}
                            exact
                            path={path}
                            component={Component}
                        />
                    ))}
                </Switch>
            </DataContext>
        </div>

//Data.js


export const DataContext = createContext();
const url = `https://corona.lmao.ninja/v2/countries`;
function Data(props) {
    const [state, setState] = useState({ countries: [] });

    useEffect(() => {
        axios.get(url).then((res) => {
            const countries = res.data;
            setState({ countries });
        });
    }, []);

    return (
        <DataContext.Provider value={{ state, setState }}>
            {props.children}
        </DataContext.Provider>
    );
}
export default Data;

Countries.js



const Div = styled.div`
    padding: 10vh 0 0 0;
`;
function Countries() {
    const [find, setFind] = useState("");
    const [filteredData, setFilteredData] = useState([]);
    const dataContext = useContext(Data.DataContext);
    const { state } = dataContext;
    const content = state.countries;

    useEffect(() => {
        setFilteredData(
            content.filter((country) =>
                country.toString().toLowerCase().includes(find)
            )
        );
    }, [find, content]);

    return (
        <Div>
            <div>
                <input
                    type="text"
                    placeholder="Search"
                    value={find}
                    onChange={(e) => setFind(e.target.value)}
                />
            </div>
            <div>
                {filteredData.map((r, i) => (
                    <div key={i}>
                        <Card style={{ width: "18rem" }}>
                            <Card.Img src={r.countryInfo.flag} variant="top" />
                            <Card.Body>
                                <Card.Title>{r.country}</Card.Title>
                                <Link to={`/${r.country}`}>
                                    <Button variant="primary">Visit</Button>
                                </Link>
                            </Card.Body>
                        </Card>
                    </div>
                ))}
            </div>
        </Div>
    );
}

export default Countries;

Answer 1

problem solved

useEffect(() => {
    const filter = content.filter((state) => {
        return state.country
            .toLowerCase()
            .includes(find.toLocaleLowerCase());
    });
    setFilteredData(filter);
}, [find, content]);