状態配列に値をプッシュしようとしていますが、TS エラーが発生して実行できません。エラーが表示される関連コンポーネントをここに配置します。エラーは子コンポーネント、具体的には handleValue(value => [...value, item.value])
にあります。
エラー:
タイプ '(value: any) => any[]' の引数はタイプ 'string[] のパラメータに代入できません
親コンポーネント:
const ChooseValuesScreen: React.FC = ({ ナビゲーション}) => {
const [value, setValue] = useState([]);
const [valuesProgress, setValuesProgress] = useState(0);
const [convertPercentageIntoUnit, setUnit] = useState(0)
const [numberOfValuesSelected, setNumberOfValuesSelected] = useState(0);
useLayoutEffect(() => {
ナビゲーション.setOptions({
headerShown: false,
}))
setUnit(valuesProgress ? 1 : 0)
setNumberOfValuesSelected(numberOfValuesSelected + convertPercentageIntoUnit)
}, [ナビゲーション,valuesProgress, convertPercentageIntoUnit, 値])
const renderItem: ListRenderItem = ({item}) => ;
戻る (
item.id}
renderItem={renderItem}
style={[tw``,{}]}
showsVerticalScrollIndicator ={false}
showsHorizontalScrollIndicator={false}
numColumns={3}
columnWrapperStyle={{ flex: 1, justifyContent: "center"}}
/>
)
}
デフォルトの ChooseValuesScreen をエクスポートします。
子コンポーネント:
エクスポート タイプ Props = {
アイテム: どれか、
colorOnPress: 文字列、
pickedActiveOpacity: 数値,
handleProgress: (valuesProgress : 数値) => void;
値進行状況: 数値,
handleValue: (値: 文字列[]) => void;
};
const CustomButton: React.FC = ({ item ,pickedActiveOpacity, colorOnPress, handleProgress, valuesProgress, handleValue }) => {
戻る (
{
if(valuesProgress [...値, item.value])
}}}>
{item.value}
)
}
デフォルトの CustomButton をエクスポートします。
値のみ handleValue(item.value)
を渡した場合、エラーは表示されず、状態配列は値を受け取りますが、私が望むのは値が配列に残ることです他の値を置き換える値を持たないでください。
アイデアはありますか?
関数の型宣言を次のように変更することで解決しました。
handleValue((value:any) => [...value, item.value])
子コンポーネントで、props は handleValue: (value:any) => void;
これを行うためのより良い方法があると確信しているので、より良い解決策があれば教えてください
小道具で handleValue: (value : string[]) => void;
を宣言しました。これは、関数が 1 つの引数 value
を文字列の配列として受け取ることを意味します
ここで handleValue(value => [...value, item.value])
では、string[]
の代わりに引数として関数を渡します
更新
type CustomFunction = (値: 文字列) => 文字列[]
...
// あなたの小道具で
handleValue: (カスタム関数) => void