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()类的东西getInitialState()尝试时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 。 您还传递了一个change function ，请使用该方法更新父state值，一旦更新了父state ，更新后的值将自动传递给子组件。 re-render它还将反映ui中的所有更改。

检查以下工作片段：

 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'/>