Обновить нарезанный массив в React

Question

Итак, у меня есть два массива.Один наполнен содержанием, а другой пустым.В настоящее время работает то, что с помощью функции 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>
    );
}

}

Answer 1

У React нет двухсторонней привязки, поэтому вам нужно обновить два массива, используя 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});
}

Answer 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)
        }
    })
}