0

So I've been scratching my head on this for quite a while, and am not sure how to proceed. I'm fairly new to RN (2 Weeks). I'm building this list app. I am using AsyncStorage to set Two Items to True.

Then I check if they are true, and push an item to a list array if its true. If I change the AsyncStorage values, I want to refresh the screen, so I can clear the list and re-push the items that are true. 

export default class CheckOut extends React.Component {

  constructor() {
    super()
    this.state = {
      refreshing: false,
      checked: false,
      one: false,
      two: false,
      list: []
    }
  }

  static navigationOptions = {
    header: null,
    };

  componentDidMount() {
    this.setState({"refreshing" : "false"});
    AsyncStorage.getItem("one").then((value) => {
        this.setState({"one" : value});
        if (this.state.one === "true"){
          this.state.list.push({
            name: 'Butter',
            avatar_url: 'https://i.imgur.com/IueK52c.png',
            checkbox: 1,
            key: 1,
          })
        }
     });
    AsyncStorage.getItem("two").then((value) => {
        this.setState({"two" : value});
        if (this.state.two === "true"){
          this.state.list.push({
            name: 'Butter Milk',
            avatar_url: 'https://i.imgur.com/9SENqe3.png',
            checkbox: 2,
            key: 2,
          })
        }
    });
  }
  _onRefresh = () => {
    this.setState({"refreshing" : "true"});
  }
  render() {
    return(
      <View containerStyle = {{backgroundColor: '#FFF'}}>

      <ScrollView containerStyle = {{backgroundColor: '#FFF'}}>

        <View>
        <ScrollView>
        <List containerStyle = {{
          flex: 1,
          marginTop: 0,
          borderTopWidth: 0,
          paddingBottom: 10
          }}>
          {this.state.list.map((l) => (
            <ListItem containerStyle = {{ height: 80, paddingTop: 15, borderTopWidth:0, borderBottomWidth: 0.25}}
              title={l.name}

            />
          ))
        }
        </List>
        </ScrollView>
        </View>
      </ScrollView>
      <TouchableOpacity
    onPress={() => this._onRefresh}
      >
        <Icon
      name={"refresh"}
      size={30}
      type='entypo'
      color="#FFF"
       />
      </TouchableOpacity>
      </View>
    )
  }
}

Sorry for the crappy formatting. But yeah the refresh button is supposed to be inside the touchable opacity. I've tried changing state and forceupdate, but they haven't worked. I want to refresh the component and list, then push to the list again, when I press the refresh button.

user8045426
  • 57
  • 6
  • You are breaking React patterns. The entire point of using React is so everything updates *automatically* once the application state changes. Your `list` is supposed to be part of the state of your app or a component. –  Sep 27 '18 at 08:12
  • how would I make it part of the state of the app? I tried putting the list inside my class, but then it says variable list not found. – user8045426 Sep 27 '18 at 08:13
  • You have `refreshing`, `checked`, `one` and `two`. Now add `list`. –  Sep 27 '18 at 08:16
  • ive moved it inside now, but still the same issue, can't refresh, even after I changed the async storage values – user8045426 Sep 27 '18 at 08:22
  • I've updated the code now, after placing list inside state – user8045426 Sep 27 '18 at 08:25
  • `this.state.list.push(` is a no-no. You *must* use `this.setState()`. The problem here is that you never really learned how to use React, did you? You primarily want to create apps, so you jumped straight into react-native? That's going to keep coming back to bite you in the ass. I recommend getting a solid grip of React first. –  Sep 27 '18 at 08:31
  • can set state allow me to add new elements to a list / array? – user8045426 Sep 27 '18 at 08:35
  • but yeah, you're right, I went straight into react native. I see what you mean, I'll practice more react. Thanks for your help and insight though – user8045426 Sep 27 '18 at 08:35

1 Answers1

0

Have a go at a few tutorials online first perhaps, but...

Your list should be within your App state.

Therefore, reference this.state.list - when you add to the list, you should use setState

Here are some useful links for adding to an array in state:

Correct modification of state arrays in ReactJS

Have a look at React Docs for lifecycle and state:

https://reactjs.org/docs/state-and-lifecycle.html

JRK
  • 3,686
  • 1
  • 13
  • 19