React.js - 复选框的值不反映初始状态

Question

我正在使用以下代码呈现复选框：

export default class Day extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            startTime: this.props.startTime,
            endTime: this.props.endTime,
            available: this.props.available
        }
        console.log(this.state.available)
    }

    return (
        <div className='day'>
            <label className='name'>
                {day.name}
                <input
                    type='checkbox'
                    checked={this.state.available}
                    onChange={this.handleAvailableChange}
                    />
            </label>
            {this.state.available}

        </div>
    );
}

这个Day 组件是从父组件渲染的，如下所示：

export default class Schedule extends React.Component {

    render () {
        const dayComponents = this.props.days.map( (day) =>
            <Day key={day.id}
                startTime={this.state[day.name].start}
                endTime={this.state[day.name].end}
                available={this.state[day.name].available}
                day={day}
                handleDayChange={(day, startOrEnd, time, available) => this.handleDayChange(day, startOrEnd, time, available) }
            />

        return (
            <div>
                {dayComponents}
            </div>
        );
    }
}

...其中this.props.days 是一组日对象，如下所示：

#<Day id: 14, name: "Saturday">

还有一个看起来像这样的状态：

{"Sunday": {"start": 0, "end": 0, "available": true},
"Monday": {"start": 0, "end": 0, "available": true},
etc...}

我的复选框的值应该根据this.state.available的值初始化，但是在渲染组件时会检查每个复选框。

我在两个不同的地方查看 this.state.available 的值，在这两个地方，我得到了 5 个真值和 2 个假值。

我在这里缺少组件生命周期的某些方面吗？我是否需要使用getInitialState() 之类的东西（我尝试时没有改变任何东西）？

希望这是我忽略的简单而愚蠢的事情，因为它看起来像这样的基本功能......

编辑：

我已经从Day 组件中删除了状态并呈现如下复选框：

<label className='name'>
    {day.name}
    <input
        type='checkbox'
        checked={this.props.available}
        onChange={this.handleAvailableChange}
        />
</label>
{this.props.available}

但是，这仍然是我得到的输出：

还值得注意的是，如果我将静态false 分配给checked 的值，则会返回一个未选中的复选框。

编辑 2（解决方案）：

事实证明，当我将计划保存到我的数据库（这是我从中提取 available 值的位置）时，我将布尔值保存为字符串，因为 AJAX 请求中的参数会自动转换为不同的数据类型。

所以我试图将checked 的值设置为"false"，它总是返回true，因为它是一个存在的字符串。

Answer 1

由于您是由父组件管理state，我建议您不要将值再次存储在子组件中，直接使用this.props.keyName。您还传递了更改function，使用该方法更新父state 值，一旦更新父state，更新的值将自动传递给子组件。在re-render 上，它也会反映 ui 中的所有变化。

检查这个工作的 sn-p：

let days = [
    {name:"Sunday"}, 
    {name:"Monday"},
    {name:"Tuesday"},
    {name:"Wednesday"},
    {name:"Thursday"},
    {name:"Friday"},
    {name:"Saturday"},
];

class Schedule extends React.Component {
    constructor(){
        super();
        this.state={
            "Sunday": {"start": 0, "end": 0, "available": true},
            "Monday": {"start": 0, "end": 0, "available": true},
            "Tuesday": {"start": 0, "end": 0, "available": true},
            "Wednesday": {"start": 0, "end": 0, "available": true},
            "Thursday": {"start": 0, "end": 0, "available": true},
            "Friday": {"start": 0, "end": 0, "available": false},
            "Saturday": {"start": 0, "end": 0, "available": false},
        }
    }
    
    handleDayChange(value, dayName){
       let obj = {...this.state[dayName]};
       obj.available = value;
       this.setState({[dayName]: obj});
    }

    render () {
        const dayComponents = this.props.days.map(day =>
            <Day 
                key={day.name}
                startTime={this.state[day.name].start}
                endTime={this.state[day.name].end}
                available={this.state[day.name].available}
                name={day.name}
                handleDayChange={(value, dayName) => this.handleDayChange(value, dayName) }
            />
        )
        return (
            <div>
                {dayComponents}
            </div>
        );
    }
}

class Day extends React.Component {
    constructor(props){
        super(props)
        this.state = {
        }
        this.handleAvailableChange = this.handleAvailableChange.bind(this);
    }

    handleAvailableChange(e){
        this.props.handleDayChange(e.target.checked, this.props.name);
    }

    render(){
        let values = this.props;
        return (
            <div className='day'>
                <label className='name'>
                    {values.name}
                    <input
                        type='checkbox'
                        checked={values.available}
                        onChange={this.handleAvailableChange}
                    />
                </label>
                {values.available + ""}
            </div>
        );
    }
}

ReactDOM.render(<Schedule days={days}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>