setState内循环 - 反应
问题描述:
我想在反应中建立一个问卷。现在,我所有的答案都将被使用文本框接受。这些将会通过ajax调用发送给我的api。我想我的参数有以下结构,setState内循环 - 反应
questionnaire: {
{question: "question", answer: "answer"},
{question: "question2", answer: "answer2"},
{question: "question3", answer: "answer3"}
}
我的代码到目前为止是非常混乱,但不知何故我得到了预期的结果。不过,我无法更新我的答案的状态,并不断收到Uncaught TypeError: Cannot read property 'setState' of undefined
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom';
import SubmitButton from '../components/SubmitButton'
export default class QuestionaireContainer extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { q: this.props.data,
questionaire: [],
};
}
componentDidMount() {
var q = this.state.q
var questionaire = this.state.questionaire
q.map(function(map){
questionaire.push({"id": map.id,
"question": map.question,
"answer": '',
});
})
this.setState({questionaire: questionaire})
}
submit(e){
e.preventDefault();
var data = {
questionaires: this.state.questionaire
}
$.ajax({
type: "GET",
url: "/questionaries/save_questions",
data: data,
dataType: 'JSON',
success:()=>{
alert("hello")
}
})
}
render() {
var questionNodes = this.state.questionaire.map(function(question){
var updateTextBox = (e) => {
console.log(question.answer);
this.setState({"answer": e.target.value});
}
return (
<li key={question.id}>
<div className="box-sed">
<div className="que-set registration question-type">
<span className="icon-ahead">
<i aria-hidden="true" className="fa fa-question-circle"></i>
</span>
<h2>{question.question}</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500's, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div className="registration question-type">
<input type="text" placeholder="Type answer" className="input-text" value={question.answer} onChange={updateTextBox} />
</div>
</div>
</li>
);
});
return (
<div className="question">
<form onSubmit={this.submit.bind(this)}>
<ul>
{questionNodes}
</ul>
<SubmitButton/>
</form>
</div>
);
}
}
此外,PARAMS是一个数组,而不是一个哈希now.I无法弄清楚怎么回事设置初始状态我的问题。代码可能真的很脏,但我只能做到这一点呢。
我可能不会让自己变得非常清楚,所以善待我并放下评论,这样我可以帮助你更好地理解我想要的。任何改变和建议都会很棒。感谢提前:)
--UPDATE--
我最终采取丹尼尔的意见,并把文本框在另一个反应的组分,并要求其在父之一。
此外,我省略循环内的整个国家的东西,并与this.props
向前移动。我更新了子组件中的text box's
状态(QuestionaireComponent
),并在使用refs
的父代QuestionaireContainer
组件中使用了它的状态。
以下是我这让我的工作最终代码:
QuestionaireContainer.jsx
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom';
import SubmitButton from '../components/SubmitButton'
import QuestionaireComponent from '../components/QuestionaireComponent'
export default class QuestionaireContainer extends React.Component {
submit(e){
e.preventDefault();
var data = {
questionaires: []
}
this.props.data.map(map => {
data.questionaires.push(this.refs[map.id].state)
});
console.log(data);
console.log("Done");
}
render() {
var questionNodes = this.props.data.map(questions => {
return (
<QuestionaireComponent question={questions.question} key={questions.id} id = {questions.id} ref={questions.id}/>
);
});
return (
<div className="question">
<form onSubmit={this.submit.bind(this)}>
<ul>
{questionNodes}
</ul>
<SubmitButton/>
</form>
</div>
);
}
}
和QuestionaireComponent.jsx
import React, {PropTypes} from 'react'
export default class QuestionaireComponent extends React.Component {
static propTypes = {
question: PropTypes.string.isRequired,
};
constructor(props) {
super(props);
this.state = { answer: '',
question: this.props.question,
id: this.props.id,
};
}
updateTextBox = (e) => {
this.setState({answer: e.target.value})
}
render() {
return (
<li>
<div className="box-sed">
<div className="que-set registration question-type">
<span className="icon-ahead">
<i aria-hidden="true" className="fa fa-question-circle"></i>
</span>
<h2>{this.state.question}</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500's, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div className="registration question-type">
<input type="text" placeholder="Type answer" className="input-text" value={this.state.answer} onChange={this.updateTextBox} />
</div>
</div>
</li>
);
}
}
希望这有助于任何人的寻找相似的东西。
答
更改此:
var questionNodes = this.state.questionaire.map(function(question){
进入
var questionNodes = this.state.questionaire.map(question => {
因为在你的代码功能(问题)覆盖上下文变量this
。
我用'=>'替换'函数(问题)','this.setState'的错误消失了。但是,这并不会改变我的'状态'。我是否必须更新'this.setState({“answer”:e.target.value});'还有其他的东西? – Aakanksha
如果您为每个问题创建另一个组件,则会更好。 –
那么我将如何维持状态呢?我的意思是我最初做了它,但我开始得到由React警告的不受控制的组件,并且状态没有在父组件中得到更新, QuestionaireContainer。 – Aakanksha