事件更改时跨表保持状态

Question

I have a table of schedules that is rendered by a dropdown. Each schedule can then be marked for export via a slider, this will store the schedule id in scheduleIdsToExport and show that schedule in the export table.

But if I change the Select Query dropdown, which renders more schedules specific to that query, the schedules marked for export from the previous query disappear from the table. I want the schedules marked for export to persist in the table no matter what query is selected from the dropdown.

So I'm thinking I need to have something in my slider function to update state with the all the schedule objects marked for export and have them persist in the exported table. I'm not exactly sure how to go about storing all the schedules to keep them in the exported table and have the scheduleIdsToExport array also keep the id 's of each schedule

  slider = ({ id, isExported }) => {
    if (isExported === true) {
      this.setState(
        {
          scheduleIdsToExport: [id, ...this.state.scheduleIdsToExport]
        },
        () => {
          console.log(this.state.scheduleIdsToExport);
        }
      );
    } else {
      const newArray = this.state.scheduleIdsToExport.filter(
        storedId => storedId !== id
      );
      this.setState(
        {
          scheduleIdsToExport: newArray
        },
        () => {
          console.log(this.state.scheduleIdsToExport);
        }
      );
    }
  };

The sandbox here will provide further explanation on what is happening.

Answer 1

This is just chaotic!

The problem : Keep track from multiples list of items(schedules) that will eventually be added to another list schedulesToExport

The Solution :

• Create a parent component that reflects the previously described state

   class Container extends Component{ state ={ querys :[ ['foo','lore ipsum','it\\'s never lupus'], ['bar','ipsumlorem', 'take the canolli'] ], selectedQuery : 0, schedulesToExport : [] } } 

Now we have a list of lists, that can be interpreted as a list of querys containing a list of schedules

• Render a select element to reflect each query:

   render(){ const { querys, selectedQuery } = this.state const options = querys.map((_, index) => (<option value={index}> Query: {index + 1}</option>)) return( <div> <select onChange={this.selectQuery}> {options} </select> { querys[selectedQuery].map(schedule => ( <button onClick={() => this.selectSchedule(index)}> Schedule: {schedule} </button> )) } </div> ) } 

What's happening? We are just rendering the selected query by it's index and showing all it's respective schedules.

• Implement the selectQuery and selectSchedule methods which will add the selected schedule in the list to export:

   selectQuery = e => this.setState({selectedQuery : e.target.value}) selectSchedule = index => { const { selectedQuery } = this.state const selected = this.state.querys[selectedQuery][index] this.setState({ schedulesToExport: this.state.schedulesToExport.concat(selected) }) } 

That's it, now you a have a list of querys being displayed conditionally rendered selectedQuery props is just a index, but could be a property's name. You only see schedules from the current selected query, so when you click on schedule we just return it's index, and the state.querys[selectedQuery][index] will be your selected schedule, that is securely store in the state on a separated list.

Answer 2

I have updated your sandbox here .

In essence, it does not work in your example because of the following:

schedules
    .filter(schedule =>
        scheduleIdsToExport.includes(Number(schedule.id))
    )
    .map(schedule => {
        return (
            <Table.Row>
                ...
            </Table.Row>
        );
     })

The value of schedules is always set to the current query , hence you end up showing schedules to export for the current query only.

A solution that changes very little of your code is to ditch scheduleIdsToExport altogether, and use schedulesToExport instead. Initially, we'll set schedulesToExport to an empty object; we'll add schedules to it (keyed by schedule id) every time a schedule is selected - we'll delete schedules in the same way every time a schedule is unselected.

class App extends React.Component {

    // ...

    slider = ({ id, isExported }) => {
        const obj = this.state.schedules.find(s => Number(s.id) === Number(id));
        if (isExported === true) {
            this.setState({
                schedulesToExport: {
                    ...this.state.schedulesToExport,
                    [id]: {
                        ...obj
                    }
                }
            });
        } else {
            const newSchedulesToExport = this.state.schedulesToExport;
            delete newSchedulesToExport[id];
            this.setState({
                schedulesToExport: newSchedulesToExport
            });
        }
    };

    // ...
}

You would then render the schedules to export as follows:

Object.keys(schedulesToExport).map(key => {
    const schedule = schedulesToExport[key];
    return (
        <Table.Row>
            ...
        </Table.Row>
     );
 })

Again, see more details in sandbox here .