Question

引发的消息是：

已超过最大更新深度。当一个组件发生这种情况重复调用componentWillUpdate内的setState或 componentDidUpdate。 React将嵌套更新的数量限制为防止无限循环。

其他消息包括：

收到true的非布尔属性width。

和：

数组或迭代器中的每个子代都应具有唯一的“键”属性。

和：

道具类型失败：提供给border的道具Box无效

我相信重要的错误是第一个错误。

此代码有问题吗？

import React, { Component } from 'react';
import { Grommet,Button, TextInput,Text,Box} from 'grommet';
import { Cursor } from 'grommet-icons';
import Todolist from './components/comtodo';

const theme = {
global: {
font: {
family: 'Roboto',
size: '16px',
height: '20px',
},
},
};
const border={
side:'solid',
color:'brand',
size:'medium',
};




class App extends Component {

constructor(props){
super(props);
this.state={
todo:['asd'],
}
this.add = this.add.bind(this);

};

add(){
const todoinput = document.getElementById('todoinput').value;
const statetodo = this.state.todo;
statetodo.push(todoinput);
this.setState({todo:statetodo})

};


render() {
const list = this.state.todo.map((elem,id) => {
return(
<Box  border={border} margin="small" background="brand" align="center" alignContent="center" alignSelf="center" >
<li style={{listStyleType:'none'}}>
<Text weight="bold" size="xlarge" color="light-1">{id+1}- </Text>
<Text color="accent-1" size="large"> {elem}</Text><br/>
<Button > X </Button>
</li>
</Box>
)

});
return (
<div className="App">
<Grommet theme={theme} >
<br/>
<div style={{width:"25%",margin:"0 auto" , textAlign:"center"}}>
<TextInput size="medium" id="todoinput"  style={{margin:"0 auto"}}  >
</TextInput>
<br/>
<Button label='Add Todo' color="accent-1" onClick={this.add} alignSelf="center" width="10%" 
alignSelf="center" width icon={<Cursor/>} >    
</Button>
</div>
<br/><br/>
<Todolist list={list}/>

</Grommet>
</div>
);
}
}

export default App;
import React,{Component} from 'react';

class Todolist extends React.Component{
    render(){
        return(
        <div style={{width:"25%",margin:"0 auto" , textAlign:"center"}}>
            {this.props.list}
        </div> 
        )
    }
}
export default Todolist;

Answer 1

不确定Grommet在内部如何处理自定义Button单击，但这是我对所有问题的看法。您还应该更好地格式化代码，因为它将帮助其他人更快地调试

替换

<Button label='Add Todo' color="accent-1" onClick={this.add} alignSelf="center" width="10%" alignSelf="center" width icon={<Cursor/>} ></Button>

使用

<Button label='Add Todo' color="accent-1" onClick={() => this.add()} alignSelf="center" width="10%" alignSelf="center" icon={<Cursor/>} ></Button>

我知道您已经绑定了add函数，但是请尝试一下。这也应该解决第二个错误（您有一个额外的width属性）

在地图内的li中添加属性键

<li key={id} style={{listStyleType:'none'}}>

删除元素Box中的border属性。不认为它受支持

react js中超过最大更新深度的消息

1 个答案: