Блог

Главная - Вопросы по программированию - React, useState — почему не может получить значение состояния при передаче как (props), но может при передаче ({props})?

React, useState — почему не может получить значение состояния при передаче как (props), но может при передаче ({props})?

#javascript #reactjs #react-native #web #jsx

Вопрос:

То же, что и title! Почему нельзя получить значение состояния при передаче как (props), но можно при передаче ({props})?

Пример кода:

 import React, { useState } from 'react'

const Header = (props) => {
  return (
    <div>
      <h1>{props.text}</h1>
    </div>
  )
}

const Button = (props) => (
  <button onClick={props.handleClick}>
    {props.text}
  </button>
)

const Statistic = props => ( <div><h2>{props.text}</h2></div>)

const Statistics = ({props}) =>{
  const total = props.good   props.neutral   props.bad

  console.log("total", total)

  return(
    <div></div>
  )
}

const App = () => {
  // save clicks of each button to its own state
  const [clicks, setClicks] = useState({
    good: 0, neutral: 0, bad: 0
  })

  const setClickToValue= newValue => {
    setClicks(newValue)
  }



  return (
    <div>
      <Header text="Give feedback" />
      <Button handleClick={ () => setClickToValue(clicks.good   1) } text="Good" />
      <Button handleClick={ () => setClickToValue(clicks.neutral   1) } text="Neutral" />
      <Button handleClick={ () => setClickToValue(clicks.bad   1) } text="Bad" />

      <Statistic text="Statistics" />
      <Statistics props={clicks} />
    </div>
  )
}

export default App

Я потерял час, чтобы выяснить, что передача как ({props}) была правильным способом. Но я все еще не понимаю, что происходит, может кто-нибудь любезно уточнить?

Спасибо, ребята!

Комментарии:

1. Когда вы используете «{props}», вы разрушаете объект, что означает, что аргумент имеет «props» как часть объекта, это означает, что вы могли бы заменить его. например, «аргументы» и получить доступ к значению следующим образом. «args.props.good»

2. Вы можете использовать const Statistics = (props) =>{ , если хотите, но вам придется использовать props.props.good вместо props.good , потому что вы передаете clicks объект в prop с именем prop

3. Просто избегайте называть одно из ваших свойств «props» .

4. о, понятно, спасибо. я следил за некоторыми руководствами, и они сделали это так, что в сочетании с моим недостатком знаний это стало беспорядком

Ответ №1:

причина в том, что у вас есть prop call props . <Statistics props={clicks} />

итак, компонент son получает это как props

 props = {
  props: clicks
}

поэтому, когда вы используете его таким образом

 const comp = props => {
  props.good
}

он ломается или около того, потому что у реквизита есть только вызов prop props

то, что вам нужно сделать, это что-то вроде

 <Statistics {...clicks} />

теперь в компоненте yow Statistics вы получите правильные реквизиты

 const Statistics = props => {
  console.log(props) // {good: 0, neutral: 0, bad: 0}

}

Ответ №2:

Это потому, что функциональный компонент react имеет аргумент по умолчанию, называемый props, который является объектом. Для доступа к объекту props мы можем получить доступ с помощью . или [] обозначения, например., props.name и javascript также как функциональность, называемая уничтожением объекта предположим, у меня есть объект

 let obj = {a:123,b:1243}
// i can directly access the object property by destructuring
 let {a} = obj;
 console.log(a)
//output 123

взгляните на деструктурирование —>

Метки: , ,