React Native 中的 State Class 当我更新数组中的 object 时，组件不会更新

Question

我使用 React Navigation 在DisplayItem屏幕中发送additional的数组，我使用componentDidMount设置 state 和数组，我使用 SectionList 显示数组，目标是使用selected pressOptional更新在array，它现在可以工作，但问题是它不会实时更新 state，只有当我重新渲染屏幕时，SectionList 才会发生变化。

阵列： additional

Array [
  Object {
    "data": Array [
      Object {
        "id": 0,
        "price": 1,
        "selected": true,
        "title": "Ranch",
        "type": "Sides",
      },
      Object {
        "id": 1,
        "price": 1,
        "selected": false,
        "title": "Blue Cheese",
        "type": "Sides",
      },
    ],
    "id": 0,
    "required": false,
    "title": "Sides",
  },
  Object {
    "data": Array [
      Object {
        "id": 0,
        "price": 0,
        "selected": false,
        "title": "Hot Sauce",
        "type": "Sauces",
      },
      Object {
        "id": 1,
        "price": 0,
        "selected": false,
        "title": "Medium Sauce",
        "type": "Sauces",
      },
    ],
    "id": 1,
    "required": true,
    "title": "Sauces",
  },
]

屏幕

class DisplayItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      additional: [],
    }
  }
  
  
  componentDidMount() {
    const { item } = this.props.route.params;
    const additional = item.additional;

    if (additional !== undefined) {
      this.setState({additional:[...additional]})
    }
  }

  pressOptional = (e) => {
    const additional = this.state.additional;

    additional.map((item) => {
      if (item.title == e.type) {
        item.data.map((item) => {
          if (item.id == e.id) {
            item.selected = !e.selected
          }
        })
      }
    })
  }


  render() {
    const { additional } = this.state;

  return (
    <View>
        <SectionList
            sections={additional}
            keyExtractor={(item, index) => item + index}
            renderSectionHeader={({ section: { type, required } }) => (
              <View>
                <Text>{type}</Text>
              </View>
            )}
          renderItem={({ item, section: { required } }) => {
              return (
                <TouchableOpacity key={item.id} onPress={() => this.pressOptional(item)}>
                    <Ionicons
                     name={item.selected == false ? 'square-outline' : 'square'}
                    />
                    <Text>{item.title}</Text>
                  <Text>${item.price}</Text>
                </TouchableOpacity>
              )
            }
          }
          /> 
    </View>
    )
}};

export default DisplayItem;

Answer 1

尝试使用 useState 代替 State 类： https://reactnative.dev/docs/state