React Functional Component props 不更新

Question

我使用一個功能組件來顯示這些 div。 我還有另一個組件，它使用 displayCounter 組件並跟蹤狀態。 我的狀態是一個計數器，我有一些按鈕可以增加和減少計數器。

假設狀態是

狀態 = { 計數器：0 }

Example 1 的 div 不顯示計數器的變化。 但是示例 2 的 div 工作正常嗎？

所以當我點擊增加按鈕 div 1 總是顯示 0，但 div 2 工作正常。

有人可以向我解釋原因嗎？

import React from 'react';

const displayCounter = (props) => {
    return (
        <div>
            <div> Example 1: {props.value} </div>
            <div> Example 2: <span>{props.value}</span> </div>
        </div>
    );
}

export default displayCounter;

如果您想發布迷你應用程序的完整代碼，請添加評論。

import React, { Component } from 'react';

import CounterControl from '../../components/CounterControl/CounterControl';
import DisplayCounter from '../../components/DisplayCounter';

class Counter extends Component {
    state = {
        counter: 0
    }

    counterChangedHandler = () => {
        this.setState( ( prevState ) => { return { counter: prevState.counter + 1 } } )
    }

    render () {
        return (
            <div>
                <DisplayCounter value={this.state.counter}/>
                <CounterControl label="Increment" clicked={() => this.counterChangedHandler( 'inc' )} />
            </div>
        );
    }
}

export default Counter;

Answer 1

你不應該使用道具，道具是一種古老的方式，你應該使用這個

import React from 'react';

const displayCounter = ({ counter }) => {
    return (
        <div>
            <div> Example 1: {counter} </div>
            <div> Example 2: <span>{counter}</span> </div>
        </div>
    );
}

export default displayCounter;