更改 state 時不調用 Function

Question

我在 react showPeople 中有一個 function。 這是代碼：

const showPeople = () => {
    const people = workers.map((worker, i) => {
        return (
            <div>
                <Worker
                    id={worker.id}
                    index={i}
                    role={worker.role}
                />
            </div>
        )
    })
    return people;
}

稍后在組件中，我想將其稱為 function，以便向我展示一些工人的信息。 我這樣稱呼它：

<div>
  {showPeople()}
</div> 

這沒關系，但它只被調用一次。 當我更改 state 時，它不會被調用。 所以我只有在刷新頁面后才有更新。 如果我刪除通話中的括號，我的屏幕上什么也沒有。 有誰知道是什么問題？ 抱歉，如果這個問題是重復的，我不確定我是否理解與他的主題相關的任何先前的答案。 謝謝

Answer 1

正如本文所寫，它應該在state更新時更新（參見此處的示例）。 除非您保存了數組workers ，例如const {workers} = this.state或const [workers, setWorkers] = useState([{'id': '1', role: 'thisRoleNAme'}])那么你可能不會實際上正在訪問一塊 state。

Answer 2

編輯您的 function 以接受工人作為參數：

const showPeople = (workers) => {
 const people = workers.map((worker, i) => {
    return (
        <div>
            <Worker
                id={worker.id}
                index={i}
                role={worker.role}
            />
        </div>
    )
})
return people;
}

並從 state 傳遞工人。

<div>
 {showPeople(this.state.workers)}
</div> 

每當您的 this.state.workers 更改時，它都應該重新渲染，並且它將與新的工人一起渲染。