React useState挂钩未触发子组件的重新渲染

Question

我有一个父功能组件

<代码>

当我从下拉列表中选择一个新值时，调用handleChange（），调用setData（），我看到状态正在更新，但

EditCard组件代码

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

对我来说，当url由setState更新时，HTML5视频没有更新，这是一个问题。我也已经在做玛雅提到的上述事情了。

我的解决方法是在元素中添加一个键。

例如。

<代码>

Answer 2

为了让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);
 };