如何在 React 功能组件中正确更新 props

Question

I'm new to react, wanted to ask if this piece of code is good practice, because I have a feeling I'm doing something wrong but not sure what.

I have a main class component which has an array of packages which consists of width, height etc.

I'm passing this packages array as props to another functional component where I want to update these values. Currently my implementation looks like this:

<Card pck={pck} key={pck.packageId}/>



export default function Card(props) {

const widthProperties = useState(0);
props.pck.width = widthProperties[0]
const setWidth = widthProperties[1];

<input type="number" id={props.pck.packageId} className="form-control"
                               value={props.pck.width} 
                               onChange={(e) => setWidth(parseInt(e.target.value))}
                               placeholder="Width" required/>
}

It works correctly, but as I said, I believe that I'm not using the useState with props correctly. Could someone explain what is wrong here? Because 3 lines of code to update props' state looks strange for me.

Answer 1

You never directly mutate props like you do here: props.pck.width = widthProperties[0] .

To have a correct data flow, width and setWidth should be in the parent component and passed down to the children, so that the children can update their width by calling setWidth .

So, since the parent is a class component, you will have something like:

class CardsList extends Component {
  state = {
    packages: []
  }

  componentDidMount() {
    fetch('api.com/packages')
      .then(response => response.json())
      .then(result => this.setState({ packages: result.items }))
  }

  setWidth = (width, packageId) => {
    this.setState({
      packages: this.state.packages.map(
        pck => pck.packageId === packageId ?  { ...pck, width } : pck
      )
    })
  }

  render() {
    return (
      <div className="cards-list">
        {this.state.packages.map(pck => (
          <Card pck={pck} setWidth={this.setWidth} key={pck.packageId}/>
        ))}
      </div>
    )
  }
}

And a Card component like:

const Card = ({ pck, setWidth }) => (
  <input value={pck.width} onChange={e => setWidth(e.target.value, pck.packageId)} />
)

Answer 2

It's common to destructure the value and setter function from useState like so:

[value, setValue] = useState(initialValue);

From what I gather from your question, the props.pck.width is the initial value of the input, so you may do something like this:

[width, setWidth] = useState(props.pck.width);

<input type="number" id={props.pck.packageId} className="form-control"
value={width} 
onChange={(e) => setWidth(parseInt(e.target.value))}
placeholder="Width" required/>

Answer 3

You don't use useState like that. useState returns an array of two things:

• The variable you are going to use
• A function which is used to change that variable

So in you case it should look like this:

const [widthProperties, setWidthProperties] = useState({}); //Here you can either pass an empty object as an initial value or any structutre you would like.

setWidthProperties(props.pck.width); //Or whatever you want to set it to.

Remember never to change the variable manually. Do it only through the function useState gives you.