使用相同组件编辑和添加数据的最佳方法。将组件状态与 redux 存储混合

Question

我正在使用 Redux 在 React 中构建 Web 应用程序。它是简单的设备管理器。我正在使用相同的组件在数据库中添加和更新设备。我不确定我的方法是否正确。在这里您可以找到我的部分解决方案：

更新模式：

在 componentDidMount 中，我正在检查 deviceId 是否在 url 中传递（编辑模式）。如果是这样，我将调用 redux 操作以从数据库中检索数据。我正在使用连接功能，所以当响应到达时，它将被映射到组件道具。

这是我的 mapStateToProps（可能我应该只映射特定的属性，但在这种情况下并不重要）

const mapStateToProps = state => ({
    ...state
})

和componentDidMount：

componentDidMount() {
    const deviceId = this.props.match.params.deviceId;
        if (deviceId) {
            this.props.getDevice(deviceId);
            this.setState({ editMode: true });
        }
    }

接下来，componentWillReceiveProps 将被触发，我将能够调用 setState 以填充表单中的输入。

componentWillReceiveProps(nextProps) {
    if (nextProps.devices.item) {
        this.setState({
            id: nextProps.devices.item.id,
            name: nextProps.devices.item.name,
            description: nextProps.devices.item.description
        });
    }
}

添加模式：

添加模式更简单——我只是在每次输入更改时调用 setState。

handleChange = name => event => {
    this.setState({
        [name]: event.target.value,
    });
};

这就是我的输入的样子：

<TextField
    onChange={this.handleChange('description')}
    label="Description"
    className={classes.textField}
    value={this.state.description}
/>

我不喜欢这种方法，因为我必须在从后端接收数据后调用 setState()。我也在使用 componentWillReceiveProps，这是不好的做法。

有没有更好的方法？例如，我可以只使用 redux 存储而不是组件状态（但我不需要在 redux 存储中输入数据）。也许我可以使用 React ref 字段并摆脱组件状态？

其他问题 - 我真的应该在每个输入 onChange 上调用 setState 吗？

Answer 1

为了避免使用componentWillReceiveProps，并且因为你使用的是redux，你可以这样做：

class YourComponent extends React.Component {

    state = {
        // ...
        description: undefined,
    };

    static getDerivedStateFromProps(nextProps, prevState) {
        if (prevState.description === undefined && nextProps.description) {
            return { description: nextProps.description };
        }

        return null;
    }

    componentDidMount() {
        const deviceId = this.props.match.params.deviceId;
        if (deviceId) {
            this.props.getDevice(deviceId);
            this.setState({ editMode: true });
        }
    }

    handleChange = name => event => {
        this.setState({
            [name]: event.target.value,
        });
    };

    // ...

    render() {
        let { description } = this.state;
        description = description || ''; // use this value in your `TextField`.

        // ...

        return (
            <TextField
                onChange={this.handleChange('description')}
                label="Description"
                className={classes.textField}
                value={description}
            />
        );
    }

}

const mapStateToProps = (state) => {
    let props = { ...state };
    const { devices } = state;
    if (devices && devices.item) {
        props = {
            ...props,
            id: devices.item.id,
            name: devices.item.name,
            description: devices.item.description,
        };
    }

    return props;
};

export default connect(
    mapStateToProps,
)(YourComponent);

然后您可以访问id、name 和description 认为this.props 而不是this.state。它之所以有效，是因为每次更新 redux 存储时都会评估 mapStateToProps。此外，您将能够通过this.state 访问description 并保持您的TextField 不变。你可以阅读更多关于getDerivedStateFromPropshere的信息。

关于你的第二个问题，每次输入更改时都调用setState 完全可以；这就是所谓的受控组件，react 团队（也包括我）鼓励使用它。见here。