React 子組件中的道具更新延遲

Question

在我的父組件中，我有一個按鈕，它獲取所選項目的 object 並在子組件的輸入字段中呈現。

父組件渲染，

<h4 className="table-title">Status</h4>
<div className="table-box">
    {
        props.table_data.map((item, idx) => {
            if (item.profiledata) {
                return (
                    <div>
                        <h4 className="profile-title">
                            <Button className="release-option-button" onClick={() => this.handleOpen('remove-release-profile', item)}>Remove Profile</Button>
                        </h4>
                        <Table columnWidths={[140, 220, 260, 140, 310]} numRows={item.profiledata.length}>
                                ...
                        </Table>
                    </div>
                )
            }
        })
    }
</div>

每當我單擊按鈕release-option-button時，我將setState設置為item 。

然后我渲染，

<EditDialog open={isOpen.EDIT_RELEASE} closeDialog={handleClose} selected_item={currRelease} />

並將currRelease作為props.selected_item傳遞。

在我的子組件中，

const init_fields = {
    release: props.selected_item.release,
    manager: props.selected_item.manager,
    start_date: props.selected_item.start,
    end_date: props.selected_item.end,
    profiles: props.selected_item.profiledata,
}

const EditDialog = (props) => {
    // State Hooks
    const [fields, setFields] = useState(init_fields)
    ...

並在輸入字段中呈現這些值

<h5>Version</h5>
<p>
    <input
        value={fields.release}
        className="input-field"
        type="text"
    />
</p>

但是，每當我 select 一個項目時，它都會呈現先前選擇的項目的字段，而不是當前的。 更新道具似乎有延遲。

有沒有辦法解決這個問題？

Answer 1

您正在通過傳入的道具為 EditDialog 生成本地 state。 使用useState ，您傳遞的參數只是 state 的初始值。 如果你想根據 props 的變化更新 state，你可以使用useEffect來響應 props 的變化。

useEffect(() => {
   setFields({
      release: props.selected_item.release,
      manager: props.selected_item.manager,
      start_date: props.selected_item.start,
      end_date: props.selected_item.end,
      profiles: props.selected_item.profiledata,
   });
}, [props.selected_item])

但是，您可能需要重新考慮使用 state 來存儲道具。 這是一種 React 反模式，可能會導致這樣的差異。