0
在我的父組件中我有一個表單，我需要將該表單的輸入傳遞給子組件，我需要將它附加到API。我一直在試圖做這樣：將子組件中的道具添加到API
`https://api.icndb.com/jokes/random?=firstName${this.props.name}`，但我不斷收到此錯誤：jQuery.Deferred例外：this.state.jokes.map不是一個函數類型錯誤：此.state.jokes.map不是函數
當我不向API添加道具時，map函數可以工作。
全部代碼在這裏：
家長：
class Input extends Component {
constructor(props){
super(props)
this.state = {
value: ' ',
selected: false
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState(
{value: event.target.value}
);
}
handleSubmit(event) {
this.setState(
{selected: true}
)
}
render() {
return (
<div>
<img src="http://vignette3.wikia.nocookie.net/mugen/images/b/b6/Chuck-norris.png/revision/latest?cb=20120615045306" alt="chuck"/>
<form>
<h1>Whats your name?</h1>
<input type="text" value={this.state.value} onChange={this.handleChange}/>
</form>
<Button onClick={this.handleSubmit} id="submit">
<Link to="/jokes">Submit</Link>
</Button>
{this.state.selected === true
?
<Jokes name={this.state.value} />
:
null
}
</div>
)
}
}孩子：
class Jokes extends Component {
constructor(props){
super(props);
this.state = {jokes: []}
this.JokeList = this.JokeList.bind(this)
}
componentDidMount() {
this.JokeList()
}
JokeList() {
return $.getJSON(`https://api.icndb.com/jokes`)
.then((data) =>{
this.setState({ jokes: data.value })
console.log(this.state.jokes)
});
}
render(){
const funnies = this.state.jokes.map((item, i) => {
return <div id="quoteList">
<h1 id="num" className="answers" key="id">{item.id}</h1>
<h2 id="quote" className="answers" key="yoke">{item.joke}</h2>
</div>
})
return(
<div> { funnies } </div>
)
}
}任何幫助非常感謝！
我不知道你想在這裏做什麼？你可以通過從母公司任何道具儘管如此，你可以在任何地方訪問它們。 – paqash
@paqash我把它改寫成對我的問題更具體 – melr
你可以在調用'this.setState（{jokes：data.value}）之前檢查'data.value'' – paqash