Reactjs 为什么在道具更改时组件不重新渲染？

我有一个问题，当道具值更改时，渲染方法不会运行。我做错了什么？我尝试使用ComponentWillReceiveProps，但它也无法运行

子组件：

 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>
    );
}

状态={
数据：this.props.populatedWords，
allSelected:false，
res:null，
textAreaVal:null，
编辑模式：新数组（this.props.populatedWords.length）.fill（false），
entityList:[]，
selectedEntity:[]，
部分：[]，
最终：空，
entityObject:null，
sendToUpdateEntity:null，
arr:JSON.parse（localStorage.getItem（'intents'））[localStorage.getItem（'intent'），
selectedValue:null，
文本输入：“”，
token:JSON.parse（localStorage.getItem（'user'））.tokens.training
};
组件将接收道具（下一步）{
log（“我被召唤”）
//您不必首先执行此检查，但它有助于防止不必要的渲染
if（nextrops.words！==this.state.data）{
this.setState（{data:nextrops.words}）；
}
}
render（）{
返回(
}/>
{this.state.data.map（（val，i）=>{
返回(
{！this.state.editMode[i]&&
{val.word}
}
{this.state.editMode[i]&&
this.handleChange（e，i，'word'）}
/>
好啊
}
{array[localStorage.getItem（'intent'）]。display_name}
{this.state.data[i].test==null&&
Тестировать
}
{this.state.data[i].test！==null&&
{this.state.data[i].test}
}
this.handleChange（e，i，'entity'）}
inputProps={{name:“数据”}}>
{this.state.entityList.map（（val，i）=>{
返回（{val}）
})}
Обучить
);
})}
);
}

父组件：

 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>
    );
}

render（）{
返回(
{
如果（e.key=='Enter'）{
this.findSelectedText（）；
}
}}
onChange={e=>{
this.setState（{textAreaVal:e.target.value}）；
}}
/>
{this.state.generator>0&&this.state.populatedWords！==null&&
}
);
}

---

此.state.data构成一个表。当我的this.props.words更新时，它不会向表中添加行。我发现问题出在它身上。

此.state.data

未在渲染方法中使用

首先，我认为您应该将其用作组件WillReceiveProps已弃用。

---

为了解决您的问题，关于您的组件将接收道具，您似乎正在将您孩子的

this.state.data

与

nextrops.words

进行比较，但在我看来您发送的是：

所以您的道具名称是

populateWords

。尝试更改此项并保持更新

为了避免使用生命周期方法，不要将道具保存到子组件中的状态。从状态中删除

数据

和

编辑模式

在子渲染中，直接访问道具

render() {
 const data = this.props.populatedWords;
 const editMode = new Array(this.props.populatedWords.length).fill(false);
 ...
}

---

很抱歉，我不小心将其他组件放在了这里，请查看编辑过的版本。您是否使用生命周期方法

ComponentWillUpdate（）

来验证是否进行了重新渲染？