javascript - 当 prop 在父组件中更改时，子组件中的输入不会更新

Question

我有一个购物 list 应用程序，它分为以下两个部分:

我将这两个组件实现为:ShoppingList 和:ItemDetails还有另一个组件:ListItem，代表一个项目行(带有编辑和删除按钮)。ShoppinList 映射到一组 ListItems。

我的 App 组件获取初始项目数组并将其发送到 ShoppingList。每次单击特定项目行中的编辑图标时，我都会在我的应用程序组件中设置 selectedItem 对象并呈现 ItemDetails 组件，将 selectedItem 传递给它，如下所示:

toggleDetailsPanel = (itemId) => (e) => {
    this.setState((prevState, props) => {
        return {
            selectedItem: (prevState.selectedItem && prevState.selectedItem.id === itemId) ? null : this.findItemById(itemId),
        };
    });
};

在 App 渲染函数中，我这样渲染它:

<div className={styles.details_outer_container}>
                    {this.state.selectedItem ? <ItemDetails handleSubmit={this.saveDetails} item={this.state.selectedItem}/> : null}
                </div>

每当点击保存按钮时，我都会在应用程序组件上运行一个函数来更新项目数组中的项目 (saveDetails)。

现在我希望每次单击不同项目行中的不同编辑图标时 ItemDetails 组件都以新值呈现，但输入值不会改变，只有标题正在呈现。

我尝试了我找到的所有解决方案，包括默认值，或使用 getValue() 函数设置值，或在输入上设置动态键，但没有任何帮助。

这是我的 ItemDetails 文件:

import React from 'react';
import PropTypes from 'prop-types';
import { Grid, Row, Col, input, Button } from 'react-bootstrap';
import styles from './styles.css';

export default class ProductDetails extends React.Component {

    static propTypes = {
        handleSubmit: PropTypes.func.isRequired,
        item: PropTypes.any.isRequired,
    };

    state = {
        id: this.props.item.id,
        name: this.props.item.name,
        quantity: this.props.item.quantity,
        price: this.props.item.price,
        description: this.props.item.description,
    };

    // Set appropriate property in state by input name
    handleInputChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };

    // Submit changed item to parent component
    handleDetailsSubmit = (e) => {
        this.props.handleSubmit(this.state);
        e.preventDefault();
    };

    render() {
        const item = this.props.item;
        const itemName = item.name.toUpperCase() || '';

        return (
            <div className={styles.details_container}>
                <div className="sub_header">
                    <span>{`${itemName} DETAILS`}</span>
                </div>
                <form className={styles.form_style}>
                    <p>
                        <label>{'Quantity'}</label>
                        <input type="text" ref="quantity" name="quantity" value={this.state.quantity}  onChange={this.handleInputChange} />
                    </p>
                    <p>
                        <label>{'Price'}</label>
                        <input type="text" ref="price" name="price" value={this.state.price} onChange={this.handleInputChange}/>
                    </p>
                    <p>
                        <label>{'Description'}</label>
                        <textarea rows={2} ref="description" name="description" value={this.state.description} onChange={this.handleInputChange}/>
                    </p>
                    <div className={styles.button_div}>
                        <Button onClick={this.handleDetailsSubmit} bsStyle="primary" bsSize="small">
                            {'Save'}
                        </Button>
                    </div>
                </form>
            </`enter code here`div>

        );
    }

}

我明白这是React处理表单的方式，但真的不知道如何解决。我真的很感激任何帮助:)

Answer 1

ProductDetails 组件仅从 item 获取其初始值。从那时起，它全部保持在状态中。所以你需要在 item 改变时重置状态。

尝试添加这样的内容:

componentWillReceiveProps( newProps ) {
  if ( this.props.item !== newProps.item ) {
    this.setState( {
      id: newProps.item.id,
      name: newProps.item.name,
      quantity: newProps.item.quantity,
      price: newProps.item.price,
      description: newProps.item.description,
    } )
  }
}