React 子组件中的道具更新延迟

Question

在我的父组件中，我有一个按钮，它获取所选项目的对象并在子组件的输入字段中呈现。

父组件渲染，

<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 currRelease 释放到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>

但是，每当我选择一个项目时，它都会呈现先前选择的项目的字段，而不是当前项目。好像更新道具有延迟。

有没有办法解决这个问题？

Answer 1

您正在从传入的道具生成 EditDialog 的本地状态。使用useState，您传递的参数只是状态的初始值。如果你想根据 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])

但是，您可能需要重新考虑使用状态来存储道具。这是一种 React 反模式，可能会导致这样的差异。