有没有比forceUpdate（）更好的解决方案

Question

Data ( fragment ) keep by my component state looks like that:

[
    {
        batchId: 1234,
        ...
        jobRowData: [
            {
                assignmentId: 12345,
                isSelected: false,
                ...
            },
            {
                assignmentId: 12346,
                isSelected: false,
                ...
            }
        ]
    },
    {
        batchId: 1235,
        ...
        jobRowData: [
            {
                assignmentId: 12347,
                isSelected: false,
                ...
            },
            {
                assignmentId: 12348,
                isSelected: false,
                ...
            }
        ]
    }
]

I want to change isSelected and I do it using below method:

handleIsSelectedChangedJob(selectedIdsData){
    let jobRowData = this.state.batchRowData.find((x) => {return x.batchId === selectedIdsData.batchId}).jobRowData
    let jobRowItemData = jobRowData.find((x) => {return x.assignmentId === selectedIdsData.assignmentId})
    jobRowItemData.isSelected = !jobRowItemData.isSelected // do the update
    // this.setState({batchRowData: [...this.state.batchRowData]}) // this also works instead of this.forceUpdate()
    this.forceUpdate() // how to refresh view according to update 2 lines above ?
}

where argument selectedIdsData could looks like that:

{assignmentId: 12346, batchId: 1234}

My question is: is there another way of refreshing view than doing this.forceUpdate()? Commented line above it also do the job, but it operates on whole state object instead on one changed property.

Answer 1

Definitely! You should never modify the state directly (by reference) and that's exactly what is happening inside of handleIsSelectedChangedJob . You have to create a new state and call setState :

handleIsSelectedChangedJob({assignmentId, batchId}) {
  const dataIndex = this.state.batchRowData.findIndex(x => x.batchId === batchId);
  const data = this.state.batchRowData[dataIndex];
  const itemIndex = data.jobRowData.findIndex(x => x.assignmentId === assignmentId);
  const item = data.jobRowData[itemIndex];

  const newItem = {...item, isSelected: !item.isSelected};
  const newData = {
    ...data,
    jobRowData: [].concat(
      data.jobRowData.slice(0, itemIndex),
      newItem,
      data.jobRowData.slice(1 + itemIndex)
    )
  };

  this.setState({
    batchRowData: [].concat(
      batchRowData.slice(0, dataIndex),
      newData,
      batchRowData.slice(1 + dataIndex)
    )
  });
}

As you can see, it's far more code, but now it's not mutating the state, only copying as much as needed. Of course, there's plenty of libraries to do it. It's still not perfect, as it's not good to read this.state and then call this.setState - using this.state(state => diff) would be safer:

handleIsSelectedChangedJob({assignmentId, batchId}) {
  this.setState(state => {
    const dataIndex = state.batchRowData.findIndex(x => x.batchId === batchId);
    const data = state.batchRowData[dataIndex];

    // Same as above...

    return {
      batchRowData: [].concat(
        batchRowData.slice(0, dataIndex),
        newData,
        batchRowData.slice(1 + dataIndex)
      )
    };
  });
}

Answer 2

This should let you do what you desire:

handleIsSelectedChangedJob(selectedIdsData){
    const _batchRowData = ...this.state.batchRowData;
    const batchIndex = _batchRowData.findIndex((x) => x.batchId === selectedIdsData.batchId);
    const jobIndex = batchIndex < 0 ? -1 : _batchRowData[batchIndex].jobRowData.findIndex((x) => x.assignmentId === selectedIdsData.assignmentId);

    if (batchIndex < 0 || jobIndex <  0) {
        return;
    }

    _batchRowData[batchIndex].jobRowData[jobIndex].isSelected = !batchRowData[batchIndex].jobRowData[jobIndex].isSelected;

    this.setState({ batchRowData: [..._batchRowData] });
}