Как сменить реквизит на состояние в React Hooks? - PullRequest
Новая
       8

Как сменить реквизит на состояние в React Hooks?

0 голосов
/ 10 января 2019

В компоненте класса Простого реагирования, который мы использовали для смены реквизита, указывалось следующее: 

constructor(props) {
    super(props)

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

Но я не знаю, как сделать это в новой функции как Hooks, но я пытаюсь сделать это таким образом. 

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

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

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

}

По сути, мне просто нужно изменить реквизиты описания, которые приходят из другого родительского компонента, чтобы перейти в состояние. Пожалуйста, не могли бы вы показать мне, как сделать это по-новому, как Хукс путь?

Ответы [ 3 ]

0 голосов
/ 10 января 2019

Начальным значением вашего состояния является значение, переданное в useState: 

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

Как указано в документации : 

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>
    );
  }
}
0 голосов
/ 22 апреля 2019

Проблема с {};

Вы должны сделать это так, чтобы синхронизировать состояние с описанием каждый раз, когда initialDesc изменяется: 

useEffect(() => {
    setDescription(initialDesc)
  }, [initialDesc]); // Only rerun if initialDesc changes

См .: React docs: Совет: Оптимизация производительности путем пропуска эффектов

0 голосов
/ 10 января 2019

Вы можете передать свое начальное состояние в качестве первого аргумента useState следующим образом: 

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

  ...
...