Question

我有一个父功能组件<EditCard/>，它是在选择编辑表行按钮时打开的模式。该编辑卡包含一个名为data的状态变量，其中包含来自正在编辑的表行的数据。我正在使用<EditCard/>钩子在useState上设置/修改状态。

<EditCard/>有一个子组件<CategoryDropdown/>，该子组件是一个接受道具data.assignCategory作为其选择值的下拉菜单，并带有一个回调handleChange()，用于更新状态值{{1 }}，并从下拉菜单中选择值。

当我从下拉列表中选择一个新值时，调用data并调用handleChange()时，我看到状态正在更新，但是setData()没有用新选择的值重新呈现

EditCard组件代码

<CategoryDropdown/>

CategoryDropdown组件

export default function EditCard(props) {
    const [data, setData] = useState(props.data);

    const handleChange = () => event => {
        let d = data;
        d.assignCategory = event.target.value;
        setData(d);
    };

    let assignCategoryCol = data.assignCategory !== undefined ? <AssignCategoryCol data={data} handleChange={handleChange}/> : <></>;

    return (
        <div>
            {assignCategoryCol}
            <Button>Update</Button>
        </div>
    )
}

{props.data.bucketTotal}`} <Lock/></Typography>)
};

const AssignCategoryCol = (props) => {
    return (
        <CategoryDropdown id={props.data.id} assignedCategory={props.data.assignCategory} handleDropdownChange={props.handleChange}/>)
};

const useStyles = makeStyles(theme => ({}));

Answer 1

为了使React知道状态已发生变化，您需要用一个全新的对象替换当前对象。当前，react看到它是同一对象，所以什么也没做。它不会搜索对象以查看其属性是否已更改。

在handleChange事件处理程序中，您具有：

let d = data;

这不是复制数据对象。相反，现在变量“ d”指向变量“数据”指向的同一对象（在内存中）。

（有关更多信息，请参阅“通过引用传递”与“通过值传递”）。

要解决此问题，请参见下面的销毁/复制：

const [data, setData] = useState(props.data)

const handleChange = event => {
        let newData = {...data} //copy the object
        newData.assignCategory = event.target.value;
        setData(newData);
 };

Answer 2

对我来说，URL由setState更新时，我的HTML5视频没有更新。正如Maiya所说，我已经在做上述事情。

我的解决方法是在元素中添加key。

例如

<video key={ item.videoUrl } />

反应useState钩子不触发子组件的重新渲染

2 个答案: