0

I was just wondering if you could help me on this one. I want to update the state from a props using getderivedstatefromprops. But the thing is that I also have a search bar in this file which is using the local state to do research. My props are updated with redux but I can't update the state. And because componentWillReceiveProps is deprecated, it is not recommended to use it.

Here's a small part of my code:

class modification extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            cle: this.props.cle,
            nom_shotgun: this.props.nom_shotgun,
            date_shotgun: this.props.date_shotgun,
            photo_shotgun: this.props.photo_shotgun,
            etat: this.props.etat,
            admin: this.props.admin,
            error: null,
            searchValue: "",
            data: this.props.data,
            loading: false,
        };
        this.arrayholder = this.props.data;
    }

    searchFunction = (text) => {
        const updatedData = this.arrayholder.filter((item) => {
            const item_data = `${item.nom_shotgun.toUpperCase()})`;
            const text_data = text.toUpperCase();
            return item_data.indexOf(text_data) > -1;
        });
        this.setState({ data: updatedData, searchValue: text });

    };

    static getDerivedStateFromProps(props, state) {
        if (props.data !== state.data) {
            return { data: props.data };
        }
        return null
    }

    render() {
        const Item = ({ nom_shotgun, cle, photo_shotgun, date_shotgun, etat, admin }) => {
            const handlerLongClick = () => {

                Alert.alert(
                    "Alert",
                    "Supprimer le shotgun?",
                    [
                        { text: "oui", onPress: () => this._supprimer(cle) },
                        { text: "non", onPress: () => console.log("no Pressed") }
                    ]
                );
            };
        }

        const renderItem = ({ item }) => <Item
          nom_shotgun={item.nom_shotgun}
          cle={item.cle}
          photo_shotgun={item.photo_shotgun}
          date_shotgun={item.date_shotgun}
          etat={item.etat}
          admin={item.admin}
        />;
        return (
            <View>
                <TouchableOpacity style={styles.item} onPress={() => this._navigation(etat, admin)} onLongPress={handlerLongClick}>
                    <View>
                        <Text style={styles.nom_shotgun}>{nom_shotgun}</Text>
                        <Text style={styles.date_shotgun}>{date_shotgun}</Text>
                        {this._admin(admin)}
                        <Text style={styles.etat}> {etat} </Text>
                        <Image
                            style={styles.photo_shotgun}
                            source={require('../image/shotgun2.png')}
                        />
                        <Divider style={{ height: 1 }} />
                    </View>
                </TouchableOpacity>
            </View>
        );
    };
}

Any advice is welcomed, Thank you!

ZHOU Alec
  • 1

1 Answers1

0

The function getDerivedStateFromProps don't work ?

Maybe use shouldComponentUpdate ?

Alexandre
  • 1
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 01 '22 at 05:29
  • well I tried using getDerivedStateFromProps, the state is updated but the data aren't shown on the screen. As for shouldComponentUpdate it doesn't work. I will also try to use the function RefrechControl. Do you think it will work? And thanks for the help :) – ZHOU Alec Jul 15 '22 at 15:13