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