子组件不更新道具更新答案

【问题标题】：Child component not updating on props update子组件不更新道具更新
【发布时间】：2019-08-03 02:06:00
【问题描述】：

我在更新我的子组件时遇到了一点问题。我的SettingsForm 组件使用Switch 子组件。

Switch 接受 updateValue 方法作为道具，并使用它来更新父组件中 on 道具的值。出于某种原因，on 属性值不会传播给孩子。在初始加载时，组件设置正确，但之后它永远不会反映父级的更改。我可以安慰并看到父项中的值正在更改，但子项从不更新。

我之前在类组件中使用过这个子组件，它工作正常。函数组件有问题。

SettingsForm.js

import React, { useState } from 'react'

import { Input, Label } from 'reactstrap'
import Switch from '../../../../components/Input/Switch/Switch'

export default function SettingsForm ({ settingOne, settingTwo, enabled, updateSettings}) {
    const [settings, setSettings] = useState({
        settingOne: settingOne,
        settingTwo: settingTwo,
        enabled: enabled
    })

    /**
     * Update values for select inputs
     * 
     * @param {event} event 
     */
    const updateSwitch = (event) => {
        const name = event.target.name
        const value = event.target.checked

        settings[name] = value
        setSettings(settings)
    }

    return (
        <div className={"settings-form"}>
            <div className="row">
                <div className="col-sm">
                    <div className="row">
                        <div className="col-sm-1">
                            <Switch                
                                id={'settingOne'}
                                name={'settingOne'}
                                value={settingOne}
                                on={settingOne}
                                updateValue={updateSwitch}/>
                        </div>
                        <div className="col-sm-10">Turn Setting One On</div>
                    </div>
                    <div className="row">
                        <div className="col-sm-1">
                            <Switch        
                                id={'settingTwo'}
                                name={'settingTwo'}
                                value={settingTwo}
                                on={settingTwo}
                                updateValue={updateSwitch}/>
                        </div>
                        <div className="col-sm-10">Turn Setting Two On</div>
                    </div>
                </div>
                <div className="col-sm">
                    <div className="row">
                        <div className="col-sm-1">
                            <Switch                                                     
                                name={'enabled'}
                                value={enabled}
                                id={'enabled'}
                                on={enabled}
                                updateValue={updateSwitch}/>
                        </div>
                        <div className="col-sm-10">Enable Item</div>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col">
                    <button type="button" onClick={updateSettings(settings)}>Update Settings</button>
                </div>
            </div>
        </div>
    )
}

Switch.js

import React, { Component } from 'react';
import style from './switch.css';

class Switch extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <React.Fragment>
                <label className={style.switch}>
                    <input
                        type="checkbox"
                        name={this.props.name}
                        id={this.props.id}
                        onClick={this.props.updateValue}
                        checked={this.props.on}
                        onChange={() => {}}
                    />
                    <span className={style.slider + ' ' + style.round}></span>
                </label>
            </React.Fragment>
        )
    }
}

export default Switch;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

通过改变 settings 对象，React 不会在你调用 setSettings 时认为它已经更新。

您可以改为创建settings 对象的副本并用它更新您的状态。

const updateSwitch = event => {
  const { name, value } = event.target;
  const newSettings = { ...settings, [name]: value };
  setSettings(newSettings);
};

【讨论】：