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

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

功能组件和类组件之间的唯一代码差异是

在这里useEffect会在每次费用更改时被调用，但是componentDidMount将在组件安装后仅被调用一次。因此，我们必须创建一个函数，并在每次费用更新时调用该函数

setState(updater, [callback])

setState

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

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

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

如何在类组件React Native中更改useEffect？

1 个答案: