1

この問題に関連するすべてのスタックオーバーフローの質問、この公式の反応投稿、および推奨される解決策を既に読みました。
もう使用することはお勧めしcomponentWillReceivePropsません！

この質問を重複としてマークする前に、私の特定の質問を理解してください。特定の問題の解決策が見つかりませんでした。

私がやろうとしていることは非常に簡単です:私はpropsから値を受け取り、値を送信
する コンポーネントを持っています(コールバック) onEnterイベント(入力時にのみサーバーに値を送信します) props.valueはランダムに変更できます(サーバーからの websocket による)KInputRange

私の質問:
私のコンポーネント内では、<input>value 属性はデータを取得しますpropsかstate?

小道具からの場合: ユーザーが入力データを入力したときに値を内部的に更新するにはどうすればよいですか?

状態からの場合: props.value がサーバーからランダムに変更された場合、新しい値を更新するにはどうすればよいですか?

私は実際に小道具の変更で内部状態を更新する必要がありますが、反応がアンチパターンだと言っている場合、今日それを行う方法は?

これまでの私のコード：

class KInputRange extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
    }

    private onKeyDown(e: any): void {
        //If the key is enter call to props.onEnter with the current value

    }

    private onChange(e: any): void {
        //if user change the value- change the internal value
    }

    public render() {
        return (
            <input value={?????} type="text" onChange={(e) => this.onChange(e)} onKeyDown={(e) => this.onKeyDown(e)}/>
        );
    }
}

使用法：

   <KInputRange value={this.state.dataFromTheServer}   onEnter={(val: number) => this.kInputRangeEnterClicked(val)}/>
4

4 に答える 4

1

まず、@Atul が言ったように、getDerivedStateFromProps を使用する必要があります。これはすべて、小道具と内部状態の両方に応じてコンポーネントの値を制御する必要があるためです。フローを使用していると仮定すると、このコードが役立ちます：

// @flow
import * as React from "react";

type Properties = {
    remoteValue: string,
    onSubmit: (value: string) => void
};

type State = {
    remoteValueMemo: string,
    internalValue: string
};

class KInputRange extends React.Component<Properties, State> {

    static defaultProps = {
        remoteValue: "",
        onSubmit: () => {}
    };

    state = {
        remoteValueMemo: this.props.remoteValue,
        internalValue: this.props.remoteValue
    };

    static getDerivedStateFromProps(props: Properties, state: State) {
        if (state.remoteValueMemo !== props.remoteValue) {
            return {
                remoteValueMemo: props.remoteValue,
                internalValue: props.remoteValue};
        }
        return null;
    }

    handleValueChange = (event: SyntheticEvent<HTMLInputElement>) => {
        this.setState({internalValue: event.currentTarget.value});
    };

    handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
        if (event.keyCode === 13) {
            this.props.onSubmit(this.state.internalValue);
        }
    };

    render(): React.Node {
        const {internalValue} = this.state;

        return (
            <input value={internalValue} onChange={this.handleValueChange} onKeyDown={this.handleKeyDown}/>
        );
    }
}

export default KInputRange;
于 2019-04-16T06:24:37.963 に答える
1

useState に渡された引数は、再レンダリング時に状態を更新するために使用されません。

useEffectフックを使用する必要があります。

import React, { useEffect, useState } from 'react';

const Test = (props) => {

    const [value, setValue] = React.useState({...props.value});

    useEffect(() => {
        setValue(props.value);
    }, [props.value])
  
    //...
}

同様のトピック: React.useState は小道具から状態をリロードしません

于 2020-11-25T13:49:03.263 に答える
-2

useEffect関数コンポーネントの特定の小道具の変更で何かをする必要があるときはいつでも、反応のフックを使用できます

useEffect(() => {
    // You can place your logic here to run whenever value changes 
},[value]);

[value] は依存関係であるため、値が変更されるたびに使用効果フック呼び出し

上記がお役に立てば幸いです。

于 2019-04-16T06:40:26.307 に答える