在 React 中更新切片渲染数组

Question

所以我有两个数组。一个充满内容和一个空的。目前有效的是使用 onClick 函数，我拼接第一个数组的值并将其推入第二个数组。

一切正常（使用 console.log 测试）。但是我在第二个 class 中呈现的数组不会更新

我目前拥有的

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

不要改变状态，而是使用 setState 来更新状态。使用 setState 也会触发重新渲染，让您可以在 render

中看到更新后的数据

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

Answer 2

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

在 React 中更新切片渲染数组

Update a sliced rendered array in React

javascript

arrays

push

splice

reactjs

我目前拥有的