web-dev-qa-db-ja.com

Reactフックでプロップを状態に変更する方法は？

Simple react classコンポーネントでは、プロップを次のように変更するために使用しました：

constructor(props) {
    super(props)

    this.state = {
      pitch: props.booking.pitch,
      email: props.booking.email,
      firstName: props.booking.firstName,
      arrivalDate: props.booking.arrivalDate
    }
}

しかし、私はフックのような新しい機能でそれを行う方法を知りませんが、私はこの方法でそれをしようとしています。

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(null)

useEffect(() => {
    setDescription(initialDesc)
  }, {})

 function handleChangeVariance(newVariance) {
    setDescription({
      ...description,
      template: {
        ...description.template,
        variance_name: newVariance,
      },
    })
  }

}

基本的に、説明のプロパティを変更する必要があります。これは、別の親コンポーネントから来て状態に変わるものです。 Pls、フックの方法のように新しい方法でそれを行う方法を教えてもらえますか？

reactjsreact-hooks
24
Feruza

次のように、useStateの最初の引数として初期状態を渡すことができます。

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(initialDesc)

  ...
17
Michiel Dral

コードの問題は{}にあります。 UseEffectフックは、オブジェクトではなく配列を期待します。代わりに[initialDesc]を使用してください。

これは、小道具が変更されたときにコンポーネントの状態をリセットする方法です

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(null)

  useEffect(() => {
    setDescription(initialDesc)
  }, [initialDesc]);
}

これは、最初のレンダリングでのみコンポーネントの状態をprop値に初期化する方法です

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(initialDesc);
}
42
Jkarttunen

状態の初期値はuseStateに渡される値です。

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(initialDesc)

documentation のように：

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

同等のものです：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}
2
Treycos