如何解决在React的严格模式树错误中发现字符串ref“ root”
了解这个问题可能是之前提出的，但是解决方案对我而言无效。
基本上，当我在文件中使用任何setState时，对于字符串引用“ root”，“ string”和“ svg”，都会收到以下错误：
Warning: A string ref,"root",has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead.
我在提交时也遇到此错误：
Uncaught TypeError: Cannot read property 'length' of undefined
at 1.chunk.js:89553
at Array.filter (<anonymous>)
at SVGSVGElement.<anonymous> (1.chunk.js:89552)
at 1.chunk.js:37286
at d3_selection_each (1.chunk.js:37293)
at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.each (1.chunk.js:37285)
at Array.chart (1.chunk.js:89521)
at Array.push../node_modules/d3/d3.js.d3_selectionPrototype.call (1.chunk.js:37302)
at e.value (1.chunk.js:184768)
at renderLoop (1.chunk.js:81702)
这是此特定组件的代码：
class CompoundCalculator extends React.Component {
constructor() {
super();
this.state = {
first_depo: 0,monthly_depo: 0,years: 0,r: 0,total: 0
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
var value = target.value;
const name = target.name;
console.log(name,value)
this.setState({
[name] : value
})
}
handleSubmit = (e) => {
let monthly_r = this.state.r / 12;
let compound = [{"x" : 0,"y" : this.state.first_depo}]
for (let yr = 1; yr <= this.state.years; yr++) {
let multiplier = Math.pow(1 + this.state.monthly_r,12 * yr);
let compound_principal = this.state.first_depo * multiplier;
let compound_monthly = this.state.monthly_depo * (multiplier - 1) / monthly_r;
compound.push({
'x': yr,'y': compound_principal + compound_monthly
});
}
e.preventDefault()
console.log(compound)
this.setState({total: compound})
}
render() {
return (
<Container>
<Row style={{width: "93vw"}}>
<Col>
<Card className='card-event center'>
<Card.Body>
<Form>
<Row>
<Col>
<Form.Group controlId="first_depo">
<Form.Label>First Deposit:</Form.Label>
<Form.Control type="number" onChange={this.handleInputChange} name="first_depo"></Form.Control>
</Form.Group>
</Col>
</Row>
<Row>
<Col>
<Form.Group controlId="monthly_depo">
<Form.Label>Monthly Deposit:</Form.Label>
<Form.Control type="number" onChange={this.handleInputChange} name="monthly_depo"></Form.Control>
</Form.Group>
</Col>
</Row>
<Row>
<Col>
<Form.Group controlId="year">
<Form.Label>No. Years:</Form.Label>
<Form.Control type="number" onChange={this.handleInputChange} name="years"></Form.Control>
</Form.Group>
</Col>
</Row>
<Row>
<Col>
<Form.Group controlId="r">
<Form.Label>r:</Form.Label>
<Form.Control type="number" onChange={this.handleInputChange} name="r"></Form.Control>
</Form.Group>
</Col>
</Row>
<Button id="submit" variant="primary" type="submit" onClick={this.handleSubmit}>Calculate</Button>
</Form>
</Card.Body>
</Card>
</Col>
<Col>
<Card style={{height: "84vh"}}>
<Card.Body>
<h3 className='mb-4'>Growth Potential</h3>
{
this.state.total &&
<div>
{
React.createElement(NVD3Chart,{
xAxis: {
tickFormat: function (d) { return d },axisLabel: 'Date',},yAxis: {
axisLabel: 'Price ($ m)',tickFormat: function (d) { return d; }
},type: 'lineChart',datum: this.state.total,x: 'x',y: 'y',height: 300,width: 400,renderEnd: function () {
console.log('renderEnd');
}
})
}
</div>
}
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
}
export default CompoundCalculator;
这个问题可能是由我使用的NVD3Chart引起的吗？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。