React native 无法使用强制更新或设置状态呈现页面

Question

class Wait extends Component{

constructor(props) {
  super(props);
  this.state = { fetchingData: true, data: [], check: ''}
  this.forceUpdateHandler.bind(this);
  }

getData = async() => {
  try {
    data = await AsyncStorage.getItem('restaurants');
    if (data != null) {
      this.setState({fetchingData: false , data: JSON.parse(data)})
    }
  } catch(error){
     console.log(error)
  }
}

forceUpdateHandler(){
    this.forceUpdate();
};

componentDidMount(){
  this.getData();
}

renderRestaurant(){
  return this.state.data.map((item) => {
    return (
    <View style ={{marginTop: 20, backgroundColor: 'red', marginTop: 20 }}>
      <Text> {item.name} </Text>
      <Text> {item.time} </Text>
      <Text> {item.wait} </Text>
      <Text> {item.people} </Text>
      <Button title = 'cancel' onPress = { async () => {
        let data = await AsyncStorage.getItem('restaurants');
        let temp = JSON.parse(data)
        let i = -1
        temp.map((value, index) => {
          if (value.name == item.name){
            i = index;
          }
        })
        if (i > -1){
          temp.splice(i, 1)
          await AsyncStorage.setItem('restaurants', JSON.stringify(temp))
        }
        this.forceUpdateHandler()         // First way
        this.forceUpdate()                // Second way
        this.setState({check: 'checked'})   // Third way
      }
      }
      />
    </View>
  )
})
}

render(){
  const { navigate } = this.props.navigation;
  const { navigation } = this.props;

  return (
    <View style={{width:200, height:200, justifyContent:'center', alignItems:'center', }}>
          {this.state.fetchingData ? null : this.renderRestaurant()}
    </View>
  )
}
}

我试图在每次单击按钮后重新呈现页面。单击按钮后，它会访问 AsyncStorage 并删除数组中的相应元素，然后用新数组更新 AsyncStorage 并重新呈现页面。

我试过以下方法：

1) call forUpdate directly after the update of the AsyncStorage
2) define the forceUpdateHandler function and bind it with this
3) call this.setState after the update of the AsyncStorage

但是上述选项中的 none 会重新呈现页面。有人可以帮忙修吗？一个例子会很棒！提前致谢。

Answer 1

答案很简单。它不会重新渲染，因为它没有任何东西可以重新渲染。它调用渲染器，检查渲染器中的每个组件是否用于渲染它的数据已更改，并在需要时渲染它们。如果您查看您的代码，您会看到在按下按钮时，您将新数据保存在异步存储中。但是，您的呈现使用 this.state.data 来呈现项目。问题是您永远不会使用新数据更新组件的状态。

当然可以 this.setState({check: 'checked'})，但渲染中没有使用它。所以没有必要更新 UI.

修复它的一个简单方法是在按钮 onPress 的末尾调用 this.getData()。这样，您将更新数据状态，这将更新您的 UI.

Answer 2

获取更新后的餐厅列表{删除所选餐厅}
将更新的列表存储到 Asyncstorage。
从 asyncStorage 获取更新列表并设置状态。

 storeData = async (restaurants) => {
    try {
     await AsyncStorage.setItem('restaurants', JSON.stringify(restaurants))
    } catch (error) {
      console.log("Error", error);
    }
  }


renderRestaurant(){
      return this.state.data.map((item, index, restaurants) => {
        return (
          <View key={index}>
            <Text> {item.name} </Text>
            <Text> {item.time} </Text>
            <Button 
              title = 'cancel' 
              onPress = {() => {
                let restaurantListWithoutCurrentRestaurant = restaurants.filter((restaurant)=> restaurant.name !== item.name);
                this.storeData(restaurantListWithoutCurrentRestaurant);
                this.getData();       
            }}/>
          </View>
        )
      })
    }

我想这会解决你的问题。

React native 无法使用强制更新或设置状态呈现页面

React native Unable to render the page with force update or set state

react-native

asyncstorage

rerender