如何更改类组件 React native 中的 useEffect？

Question

我想将我的代码从一个函数重写到一个类，但我被 useEffect 函数卡住了。

我有一个在添加新元素后更新的数组，但函数 countTotal 在更新后开始工作。 所以， 1）打开App myArray有两个对象，总和=0（但应该是300） 2）将总和为100的新对象添加到myArray三个对象中，总和= 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

您发布的代码似乎运行良好。我已经创建了代码框网址 https://codesandbox.io/s/affectionate-shaw-toe9p

上面代码中函数组件和类组件的唯一区别是

这里 useEffect 每次费用发生变化时都会被调用，但是 componentDidMount 只会在组件挂载后被调用一次。所以我们必须创建一个函数并在每次更新费用时调用该函数

setState(updater, [callback])

setState

所以在调用setState的时候，我们可以把回调函数传给setState，更新总值

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

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