如何改变类组件React原生中的useEffect？

Question

我想把我的代码从函数改成类，但是我被useEffect函数卡住了，我有一个数组，在添加新元素后会更新，但是函数countTotal在更新后开始工作。

我有一个数组，在添加新元素后会更新，但函数countTotal在更新后才开始工作，所以，1)打开App myArray有两个对象，总和=0(但应该是300)2)在myArray的三个对象中添加新对象，总和100，总和=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，但是没有任何效果。

Answer 1

你发布的代码似乎可以正常工作。我已经创建了codesandbox url https:/codesandbox.iosaffectionate-shaw-toe9p

上面的代码中，功能组件和类组件的唯一区别就是

这里的useEffect在每次改变支出时都会被调用，但是componentDidMount在组件安装后只会被调用一次。所以我们必须创建一个函数，并在每次更新费用时调用该函数。

setState(updater, [callback])

设置国家

所以在调用setState时，我们可以将回调函数传递给setState，并更新总的值。

应在回调中给出总数，因为setState是异步的。

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