在 React 中更新切片渲染数组答案

【问题标题】：Update a sliced rendered array in React在 React 中更新切片渲染数组
【发布时间】：2019-05-06 20:40:00
【问题描述】：

所以我有两个数组。一个充满内容，一个空。当前的工作是使用 onClick 函数，我将第一个数组中的值拼接起来并将其推送到第二个数组中。

这一切都很好（使用 console.log 测试）。但是我在第二堂课中渲染的数组没有更新

我目前拥有的

export class OpeningHoursContent extends Component {

constructor (props) {
    super (props)
    this.state = {
        OpeningHoursUsed : [],
        OpeningHoursOptions : [
            {value: 'open247', option: 'Open 24/7', title: 'Open 24/7', content: 'We are open 24/7'},
            {value: 'openClosed', option: 'Open / Closed', title: 'Open / Closed', content: '<OpeningHoursTable />'},
            {value: 'holidays', option: 'Holidays', title: 'Holidays', content: '<ListHolidays />'},
            {value: 'showroom', option: 'Showroom', title: 'Showroom', content: '<OpeningHoursTable />'},
            {value: 'shop', option: 'Shop', title: 'Shop', content: '<OpeningHoursTable />'},
            {value: 'office', option: 'Office', title: 'Office', content: '<OpeningHoursTable />'},
            {value: 'deskoffice', option: 'Deskoffice', title: 'Deskoffice', content: '<OpeningHoursTable />'},
            {value: 'workspace', option: 'Workspace', title: 'Workspace', content: '<OpeningHoursTable />'},
            {value: 'vacation', option: 'Vacation', title: 'Vacation', content: '<ListVacation />'},
            {value: 'appointment', option: 'Appointment', title: 'Appointment', content: '<OpeningHoursTable />'},
            {value: 'selfservice', option: 'Selfservice', title: 'Selfservice', content: '<OpeningHoursTable />'},
            {value: 'addMessage', option: 'Add a message', title: 'Your message', content: '<OpeningHoursTable />'},
            {value: 'addCustom', option: 'Add custom', title: 'Custom title', content: '<OpeningHoursTable />'}
        ]
    }
}

UpdateOpeningHoursUsed ({ value, option, title, content }, index) {
    this.state.OpeningHoursUsed.push({ value: value, option: option, title: title, content: content })
    this.state.OpeningHoursOptions.splice(index, 1);
}

render () {
    return (
        this.state.OpeningHoursOptions.map(({ value, option, title, content }) => {
                return (
                    <div key={value} onClick={() => this.UpdateOpeningHoursUsed({ value, option, title, content })} className='option'>{option}</div>
                );
        })
    )
}
}

export default class EditOpeningHours extends Component  {
render () {

    return (
        <div>
            // THIS PART SHOULD RERENDER AFTER SPLICE
            <OpeningHoursContent />
        </div>
    );
}

}

【问题讨论】：

标签： javascript arrays reactjs push splice

【解决方案1】：

React 没有 2 路绑定，因此您需要使用 setState 更新两个数组

UpdateOpeningHoursUsed ({ value, option, title, content }, index) {
    this.state.OpeningHoursUsed.push({ value: value, option: option, title: title, content: content })
    this.state.OpeningHoursOptions.splice(index, 1);
    this.setState({OpeningHoursUsed, OpeningHoursOptions});
}

【讨论】：

我试过你的方法；但是 React 告诉我 'OpeningHoursUsed' 和 'OpeningHoursOptions' 没有定义（在线：this.setState...）

【解决方案2】：

不要改变状态，而是使用 setState 来更新状态。使用 setState 还会触发重新渲染，让您在渲染中看到更新的数据

UpdateOpeningHoursUsed ({ value, option, title, content }, index) {
    this.setState(state => {
       const updated = state.OpeningHoursUsed.concat([{ value: value, option: option, title: title, content: content }])
       return {
           OpeningHoursUsed: updated,
           OpeningHoursOptions: updated.splice(index, 1)
        }
    })
}

【讨论】：

这正是我所需要的。谢谢！