React Native FlatList: переключить значение состояния - PullRequest
Новая
       17

React Native FlatList: переключить значение состояния

0 голосов
/ 12 января 2020

Я пытаюсь переключить состояние текста с ACTIVE на INACTIVE (и наоборот) для каждого отдельного элемента в FlatList. В приведенном ниже коде status переключается с true на false (и false на true), но текст в приложении показывает inactive и не изменяется. 

import NameActionBar from '../components/NameActionBar';

        export default class MasterScreen extends Component {
            constructor(props) {
                super(props);
                this.state = {
                    dataSource: [],
                    status: false,
                };
            }

            componentDidMount() {
                this.getFreelancerList();
            }

    //Calling API to get list
            getFreelancerList() {
                let self = this;
                AsyncStorage.getItem('my_token').then((keyValue) => {
                    console.log('Master Screen (keyValue): ', keyValue); //Display key value
                    axios({
                        method: 'get',
                        url: Constants.API_URL + 'user_m/freelancer_list/',
                        responseType: 'json',
                        headers: {
                            'X-API-KEY': Constants.API_KEY,
                            'Authorization': keyValue,
                        },
                    })
                        .then(function (response) {
                            console.log('Response.Data: ===> ', response.data.data);
                            console.log('Response: ', response);
                            self.setState({
                                dataSource: response.data.data,
                            });
                        })
                        .catch(function (error) {
                            console.log('Error: ', error);
                        });
                }, (error) => {
                    console.log('error error!', error) //Display error
                });
            }

//Show the list using FlatList
            viewFreelancerList() {
                const { dataSource } = this.state;
                return (
                    <View>
                        {<FlatList
                            data={dataSource}
                            keyExtractor={({ id }, index) => index.toString()}
                            renderItem={({ item }) => {
                                return (
                                    <View style={styles.containerFreelancer}>
                                        <TouchableOpacity
                                            style={{ flex: 1 }}
                                            onPress={() => console.log(item.freelancer_name)}
                                        >
                                            <Text style={styles.textFreelancer}>{item.freelancer_name}</Text>
                                        </TouchableOpacity>
                                        <TouchableOpacity
                                            onPress={() => {
                                                const newStatus = !this.state.status;
                                                this.setState({
                                                    status: newStatus,
                                                });
                                                console.log('status: ', this.state.status);
                                            }}
                                        >
                                            <Text>{this.state.status ? "ACTIVE" : "INACTIVE"}</Text>
                                        </TouchableOpacity>
                                    </View>
                                );
                            }}
                        />}
                    </View>
                );
            }

            render() {
                return (
                    <>
                        <NameActionBar />
                        <ScrollView>
                            {this.viewFreelancerList()}
                        </ScrollView>
                    </>
                );
            }
        }

Мои проблемы:

  1. Как сделать так, чтобы текст переключался с active на inactive?

  2. Как сделать так, чтобы текст переключался отдельно для каждого элемента в FlatList? например: Item 1: 'ACTIVE', Item 2: 'INACTIVE' et c.

Буду признателен за любую помощь, поскольку я все еще новичок в изучении React Native.

Снимок экрана приложения ниже:

app screenshot

1 Ответ

1 голос
/ 12 января 2020

Вам необходимо создать дочерний компонент с собственным состоянием. 

class FlatListComponent extends Component {
  state = {
    status: false
  }

  render() {
    <View style={styles.containerFreelancer}>
       <TouchableOpacity style={{ flex: 1 }} onPress={() => console.log(this.props.freelancer_name)}>
           <Text style={styles.textFreelancer}>{this.props.freelancer_name}</Text>
       </TouchableOpacity>
       <TouchableOpacity onPress={() => {
              const newStatus = !this.state.status;
              this.setState({
                status: newStatus,
              });
              console.log('status: ', this.state.status);
            }}
        >
            <Text>{this.state.status ? "ACTIVE" : "INACTIVE"}</Text>
      </TouchableOpacity>
    </View>
  }
}

Тогда вам просто нужно добавить его в ваш renderItem метод. 

<FlatList
  data={dataSource}
  keyExtractor={({ id }, index) => index.toString()}
  renderItem={({ item }) => <FlatListComponent {...item}/>
/>}

Вот рабочий пример

Надеюсь помогает ! Не стесняйтесь добавлять комментарии, если вы все еще застряли

...