在本机反应上定义状态类型？

Question

我正在调用一个电影 API，并且希望每次我在搜索栏中写入内容时都会更新 searchValue。但是，似乎我需要在使用打字稿时定义“setSearchValue”。我该怎么做？

import React from 'react';
import { useState, useEffect } from 'react';
import { ScrollView } from 'react-native';
import MovieList from './components/MovieList'
import Search from './components/Search';


const App: React.FC = () => {

    const [movies, setMovies] = useState([]);
    const [searchValue, setSearchValue] = useState('');

    const getMovieRequest = async () => {
        const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=520a7faf`;

        const response = await fetch(url);
        const responseJson = await response.json();

        if(responseJson.Search) {
            setMovies(responseJson.Search);
        }
    };

    useEffect(() => {
        getMovieRequest(searchValue);
    }, [searchValue]);

    console.log(movies);

    return (
        <>
            <Search searchValue={searchValue} setSearchValue={setSearchValue} />
            <ScrollView>
                <MovieList movies={movies} />
            </ScrollView>

        </>
    );
};

export default App;

这里是搜索组件：

import React from 'react';
import { View, TextInput } from 'react-native';

interface Props {
    value: string;
    searchValue: string;
}

const Search: React.FC<Props> = (props) => {
    return (
       <View>
           <TextInput 
           placeholder="Search here"
           value={props.value}
           onChange={(event) => props.setSearchValue(event.target.value)}
           />
       </View>
    );
}

export default Search;

我收到错误消息：“类型 'PropsWithChildren' 上不存在属性 'setSearchValue'。”

Answer 1

接口声明有错别字。

替换以下代码：

interface Props {
    value: string;
    searchValue: string;
}

使用新代码：

interface Props {
    searchValue: string;
    setSearchValue:(searchVal: string) => void;
}