Как изменить useEffect в компоненте класса React native? - PullRequest
Новая
       4

Как изменить useEffect в компоненте класса React native?

0 голосов
/ 27 мая 2020

Я хочу переписать свой код от функции к классу, но я застрял с функцией useEffect.

У меня есть массив, который обновляется после добавления нового элемента, но функция countTotal начинает работать после обновления. Итак, 1) открытое приложение myArray имеет два объекта, Total sum = 0 (но должно быть 300) 2) добавить новый объект с суммой 100 в myArray три объекта, Total sum = 300 (должно быть 400) 

export default class Home extends Component {
    constructor(){
        super();
        this.state = {
            total:0,
            expenses:[
                { key: '1', sum: '100',  date: '12 April 2020' },
                { key: '2', sum: '200', date: '17 April 2020' },
            ],
        }
        this.submitHandler = this.submitHandler.bind(this);
        this.countTotal = this.countTotal.bind(this);
    }

    countTotal(){
        const totalSum = this.state.expenses.reduce((prev,next) => prev + Number(next.sum),0);
        this.setState({total: totalSum})
    }

    submitHandler (sum, date) {
        const key = Math.random().toString();
        const obj = {'key':key, 'sum':sum, 'date':date};

        this.setState(prevState => ({ 
                expenses: [obj, ...prevState.expenses]}))
        countTotal()  
    };  
    render(){
        return (
            <DismissKeyboard>
              <View style={styles.container}>

                <View style={styles.content}>
                  <TouchableOpacity onPress={this.showList}>
                    <Costs costs={this.state.total}  />
                  </TouchableOpacity>
                </View>


                <View style={styles.list}>
                  <FlatList
                    data={this.state.expenses}
                    renderItem={({ item }) => (
                      <ListCosts item={item} pressHandler={this.pressHandler} />
                    )}
                  />
                </View>

              </DismissKeyboard>

          );
        }
    }

Итак, с его помощью он работал 

useEffect= (()=> {
    const totalSum = expenses.reduce((prev,next) => prev + Number(next.sum),0);
    setTotal(totalSum)
    console.log(totalSum)
    } [expenses]);

Я пытался добавить componentDidMount и componentDidUpdate, но ничего. Есть предложения?

1 Ответ

1 голос
/ 27 мая 2020

код, который вы опубликовали, похоже, работает нормально. Я создал codeandbox url https://codesandbox.io/s/affectionate-shaw-toe9p

Единственная разница в приведенном выше коде между функциональным компонентом и компонентом класса

Здесь при использовании Эффект вызывается каждый раз при изменении расходов , но componentDidMount будет вызываться только один раз после монтирования компонента. Таким образом, мы должны создать функцию и вызывать эту функцию каждый раз, когда обновляются расходы 

setState(updater, [callback])

setState

, поэтому при вызове setState мы можем передать функцию обратного вызова в setState и обновить общее значение

Общее количество подсчетов должно быть указано в обратном вызове, потому что setState является асинхронным 

    this.setState(prevState => ({ 
            expenses: [obj, ...prevState.expenses]}), countTotal)
...