将子组件中的道具添加到API

Question

在我的父组件中我有一个表单，我需要将该表单的输入传递给子组件，我需要将它附加到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> 
 

 
    ) 
 
    } 
 
}

任何帮助非常感谢！

Answer 1

我检查了发生了什么事。

当您请求https://api.icndb.com/jokes/random?=firstName${this.props.name}时，由于过滤条件的限制，很可能只返回一条记录。

在这种情况下，API将返回一个Object，而不是一个元素为的Array。这就是你错误的原因：

this.state.jokes.map is not a function

不过，我调整好你的代码来支持这两种情况下，请检查下面的例子。下面是我做的，一旦我们得到的回应：

// Make sure the jokes are an Array, because of we iterate over them later. 
let jokes = Array.isArray(data.value) ? data.value : [data.value]; 
this.setState({ jokes }); 

class Input extends React.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> 
 
      <input type="button" value="Submit" onClick={this.handleSubmit} id="submit" /> 
 
      {this.state.selected === true 
 
       ? 
 
      <Jokes name={this.state.value} /> 
 
       : 
 
       null 
 
       } 
 
     </div> 
 
    ) 
 
    } 
 

 
    } 
 
    
 
class Jokes extends React.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/random?=firstName${this.props.name}`) 
 
     .then((data) =>{ 
 
     // Make sure the jokes are an Array, because of we iterate over them later. 
 
     let jokes = Array.isArray(data.value) ? data.value : [data.value]; 
 
     this.setState({ 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> 
 

 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Input />, document.getElementById('container'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>