我收到此错误
警告:Editdamnpoll正在更改文本类型的不受控制的输入 被控制。输入元素不应从不受控制的方式切换 控制(反之亦然)。决定使用受控制的还是 组件寿命的不受控制的输入元素。
这是我的代码
```
import React, { Component } from 'react';
import Api from '../../utils/ApiManager';
import {Link} from 'react-router';
var pollId = 2;
var newVotesObj ={};
class Editdamnpoll extends Component {
constructor(){
super()
this.state = {
poll:{
pollquestion: 'ankur',
author: 'ankur',
responses: [1]
},
newresponses:[2]
};
}
componentWillMount(){
var urlWithId =this.props.location.pathname;
var pollID = urlWithId.split('/').pop();
console.log("here's the poll id",pollID)
Api.get('/api/polls/' + pollID, null, (err, response) => {
if(err){
alert("Error: " + err);
}
else{
var newobj = {pollquestion:response.message.pollquestion,author:response.message.author,responses:response.message.responses}
this.setState({
poll:newobj
});
var newarr = this.state.poll.responses.map(function(i,index){
return i.response
})
var tochange = this.state.newresponses;
this.setState({
newresponses:newarr
})
console.log("this is only array",this.state.newresponses);
console.log("conventional responses",this.state.poll.responses)
}
});
}
editpoll(){
Api.put('/api/polls/' + pollId, newVotesObj, (err, response) => {
if (err) {
console.log("Error: " + JSON.stringify(err));
return;
}
// Success so update the state with the correct scores
/*
var listLen = updatedList.responses.length;
for (let i = 0; i < listLen; i++) {
if (updatedList.responses[i]['response'] == selectedRadio)
updatedList.responses[i]['votes'] = totalVotes;
}
// Get doughnut to re-draw chart. (using a data store?)
var votesSoFar = updatedList.responses.map(function(rv) { return rv.votes; });
chartValues.datasets[0].data = votesSoFar
this.setState({
data: chartValues,
list: updatedList
});
*/
},true);
}
valuechangetext(e){
console.log("this is the id",e.target.id)
var key = e.target.id;
var newresponses = this.state.newresponses[key];
this.setState({
newresponses:e.target.value
})
}
render(){
console.log("state",this.state)
console.log("this map",this.state.poll.responses)
var newarr = this.state.newresponses;
var responseinput = this.state.poll.responses.map(function(i, index){
return(
<div key={index} >
<input type="text" id={index} onChange={this.valuechangetext.bind(this)} value={this.state.newresponses[index]} /> <br /><br />
</div>
)
}.bind(this));
console.log("response input inside render",responseinput)
return (
<div>
<h2>Edit the damn poll here!!</h2>
<h4>{this.state.pollquestion}</h4>
<p>author:{this.state.author}</p>
<form onSubmit={this.handleedit}>
{responseinput}
<br/>
<input type="submit" name="submitBtn" value="Submit Edited Poll"/>
</form>
<button onClick={this.editpoll.bind(this)}>Edit Poll</button>
<Link to="/">Back</Link>
</div>
)
}
}
export default Editdamnpoll
```
到目前为止我对此事的研究
我查看了stackoverflow问题。每个答案都告诉我,我应该用&#34;&#34;来启动州的关键价值对。 。如果它为null或未定义,则将其作为不受控制的组件启动。当我将它的值设置为this.state .... React认为,我正在将不受控制的组件改为受控制。但是,正如你现在所看到的,我启动了所有具有一定价值的州。所以,我仍然无能为力,为什么我仍然看到这个警告信息?
答案 0 :(得分:0)
首次渲染this.state.newresponses[index]
将寻找this.state.newresponses[0]
(来自第一个this.state.poll.responses
循环的索引)
这还不存在,你有this.state.newresponses = [2]
您可以更改初始状态,或执行类似
的操作 value={this.state.newresponses[index] || ''}