reactjs - 为什么当道具改变时组件不重新渲染?
问题描述
我有问题,当 props 值更改时,渲染方法不运行。我究竟做错了什么?我尝试使用 componentwillrecieveprops 但它也没有运行。
子组件:
state = {
data: this.props.populatedWords,
allSelected: false,
res: null,
textAreaVal: null,
editMode: new Array(this.props.populatedWords.length).fill(false),
entityList: [],
selectedEntity: [],
parts: [],
final: null,
entityObject: null,
sendToUpdateEntity: null,
arr: JSON.parse(localStorage.getItem('intents'))[localStorage.getItem('intent')],
selectedValue: null,
textInput: "",
token: JSON.parse(localStorage.getItem('user')).tokens.training
};
componentWillReceiveProps(nextProps) {
console.log("i am called")
// You don't have to do this check first, but it can help prevent an unneeded render
if (nextProps.words !== this.state.data) {
this.setState({ data: nextProps.words });
}
}
render() {
return (
<Card className={classes.root} style={{maxWidth: '100%'}}>
<NoRazmetkaDialog ref={this.dialog}/>
<NoEntityDialog ref={this.dialogE}/>
<HalfRazmetkaDialog ref={this.dialogHalf}/>
<CardHeader action={<Grid container>
<Grid item style={{display: 'flex'}}>
<Tooltip>
<FilterOptions updateSelected={this.updateSelectedValue}/>
</Tooltip>
<TextField variant="standard" style={{paddingTop: '10px'}} onChange={e => {
this.setState({textInput: e.target.value});
}}/>
</Grid>
</Grid>}/>
<div className={classes.tableWrapper}>
<Table className={classes.table} aria-labelledby="tableTitle">
<IntentTableHead data={this.state.data} updateAllSelected={this.updateAllSelected}
allSelected={this.state.allSelected} updateData={this.updateData}
sendToDialogflow={this.sendToDialogFlow} updateEntity={this.updateEntity}
entityObject={this.state.entityObject}/>
<TableBody>
{this.state.data.map((val, i) => {
return (
<TableRow hover>
<TableCell padding="checkbox">
<Checkbox checked={this.state.data[i].checked}
onChange={this.addCheckedPhrase(i)}/>
</TableCell>
{!this.state.editMode[i] &&
<TableCell onClick={this.changeEditMode(i)}>
{val.word}
</TableCell>}
{this.state.editMode[i] &&
<TableCell>
<TextField
multiline
defaultValue={val.word}
className={classes.textField}
margin="none"
variant="outlined"
value={this.state.textAreaVal}
onChange={e => this.handleChange(e, i, 'word')}
/>
<Button onClick={this.changeEditMode(i)}>OK</Button>
</TableCell>
}
<TableCell>
{array[localStorage.getItem('intent')].display_name}
</TableCell>
{this.state.data[i].test === null &&
<TableCell>
Тестировать
</TableCell>}
{this.state.data[i].test !== null &&
<TableCell>
{this.state.data[i].test}
</TableCell>}
<TableCell>
<Select value={this.state.data[i].entity}
onChange={e => this.handleChange(e, i, 'entity')}
inputProps={{name: "data"}}>
{this.state.entityList.map((val, i) => {
return (<MenuItem value={val} key={i}>{val}</MenuItem>)
})}
</Select>
</TableCell>
<TableCell>
<Button onClick={this.updateIntent(i)}>Обучить</Button>
</TableCell>
<TableCell>
<IconButton onClick={this.deleteRow(i)}>
<ClearIcon/>
</IconButton>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
</Card>
);
}
父组件:
render() {
return (
<div>
<PositionedDialog ref={this.dialog} selectedWord={this.state.selectedWord} textAreaVal={this.state.textAreaVal} updateRes={this.updateRes}/>
<IconButton variant="contained"
color="primary"
component={Link} to="/app/intent"
onClick={this.backToComponent}
>
<KeyboardArrowLeft/>
</IconButton>
<Paper>
<Toolbar>
<Grid container alignItems="center">
<Grid item xs alignItems="center">
<TextField
fullWidth
onFocus
id="help"
InputProps={{
disableUnderline: true
}}
value={this.state.textAreaVal}
onKeyPress={e => {
if (e.key === 'Enter') {
this.findSelectedText();
}
}}
onChange={e => {
this.setState({textAreaVal: e.target.value});
}}
/>
</Grid>
</Grid>
</Toolbar>
</Paper>
<Paper style={{marginTop: "20px", overflow: "hidden"}}>
{this.state.generator > 0 && this.state.populatedWords !== null &&
<IntentTable populatedWords={this.state.populatedWords}/>}
</Paper>
</div>
);
}
this.state.data 形成一个表格。并且当我的 this.props.words 更新时,它不会向表中添加行。我看到问题出在它身上。
解决方案
this.state.data
未在您的渲染方法中使用
推荐阅读
- python - Selenium Django/Python 错误:无法找到一组匹配的功能
- html - 在溢出父级中居中绝对 div - css
- python - 熊猫删除所有列中包含“必需值”的所有行
- c++ - 从文件读取到映射中,其键为整数,对应的值为集合
- ios - Xamarin ios如何根据superview添加约束
- pointers - Fortran 中的过程指针
- c - 函数指针的别名
- riscv - Mscratch 和 Mtvec 寄存器有什么区别?
- nginx - Openresty nginx 抛出 zlib not found 错误
- c++ - Cassandra 驱动程序中每个主机的最大连接数