反应使用状态钩子不触发子组件的重新渲染

Question

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

<EditCard/>有一个子组件<CategoryDropdown/>它是一个接受 propdata.assignCategory作为其所选值的下拉列表和一个回调handleChange()，该回调使用从下拉列表中选择的值更新状态值data。

当我从下拉列表中选择一个新值时handleChange()调用setData()并且我看到状态正在更新，但<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 => ({}));

类别下拉组件

class CategoryDropdown extends Component {
constructor(props) {
super(props);
//TODO Get Categories from DB and set default
this.state = {
categories: ['Select One', 'Category1', 'Category2', 'Category3'],
};
}
render() {
return (
<div id={'categoryDropdown'}>
<Select onChange={this.props.handleDropdownChange(this.props.id)} value={this.props.assignedCategory}>
{this.state.categories.map((category) => {
return <MenuItem value={category}>{category}</MenuItem>
})}
</Select>
</div>
)
}
}

const styles = theme => ({});
export default withStyles(styles)(CategoryDropdown)

Answer 1

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

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

let d = data;

这不是复制数据对象。 相反，现在变量"d"指向变量"data"指向的同一对象(在内存中(。

(有关详细信息，请阅读"按引用传递"与"按值传递"(。

要解决此问题，请参阅下面的解构/复制：

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

Answer 2

对我来说，当网址由setState更新时，我遇到了 HTML5 视频不更新的问题。我也已经在做Maiya提到的上述事情了。

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

例如

<video key={ item.videoUrl } />

Answer 3

你可以像这样设置状态，因为 react 仅在对象更改时重新渲染：

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