反应地图不是我的应用程序中的功能错误

Question

我是ReactJS的初学者，但遇到了我不理解的错误。这是我第一次用ReactJS应用程序编写的。这是我的代码。

错误

react map is not a function error in my app

SearchBar组件

import RecipeList from './recipes_list';

class SearchBar extends Component {

    state = {
        term : []
    }

    onInputChange(term){
        this.setState({term});
    }

    onSubmit = async (term) => {
        const recName= this.state.term;
        term.preventDefault();
        const api_key = 'a21e46c6ab81bccebfdfa66f0c4bf5e9';
        const api_call = await Axios
          .get(`https://www.food2fork.com/api/search?key=${api_key}&q=${recName}&`)
          .then(res=> {this.setState({term : res.data.recipes})})
    }

    render() {
      return (
        <div>
          <form onSubmit={this.onSubmit} >
            <div className="search-bar">
              <input
                type="text"
                value={this.state.term}
                onChange={event => this.onInputChange(event.target.value)}
              />
              <button type="submit">Search</button>
            </div>
          </form>
          <RecipeList List ={this.state.term}/>
          </div>
        )
    }
}

RecipeList组件

const RecipeList = props => (
  <div>
    {
      props.List.map((recipe) => {
        return (
          <div>{recipe.title}</div>
        )
      })
    }
  </div>
)
export default RecipeList;

谢谢你们的帮助

Answer 1

您的问题在以下代码段中：

import { Contact, ContactField, ContactName, Contacts } from '@ionic-native/contacts';
: 
constructor(public navCtrl: NavController, public navParams: NavParams, private contacts: Contacts) {
    this.contacts.pickContact().then((contact)=>{
        alert("contacts:-->"+ JSON.stringify(contact));
    });
}

这会将您的状态变量设置为字符串。例如，如果我输入<ion-content padding> <form (ngSubmit)="saveItem()" ng-controller="AppCtrl"> <ion-item> <ion-label>Name</ion-label> <ion-input type="text" [(ngModel)]="contact.displayName" name="displayName"></ion-input> </ion-item> <ion-item> <ion-label>Phone</ion-label> <ion-input type="tel" [(ngModel)]="contact.phoneNumbers" name="phoneNumbers"></ion-input> </ion-item> <ion-item> <ion-label>Birth</ion-label> <ion-datetime displayFormat="DD/MM/YYYY" [(ngModel)]="contact.birthday" name="birthday"></ion-datetime> </ion-item> </form> </ion-content> ，则您的状态对象将为onInputChange(term){ this.setState({term}); } 。您现在正尝试在字符串上Hello!，{ term: 'Hello!' }不是一个函数。

Answer 2

.map函数仅在数组上可用。 看来数据的格式不是您期望的格式（它是{}，但您期望的是[]）。

this.setState({data: data});

应该是

this.setState({data: data.conversations});

检查将“数据”设置为哪种类型，并确保它是一个数组。

通常，您还可以将新数据转换为数组，并使用诸如concat之类的东西：

var newData = this.state.data.concat([data]);  
this.setState({data: newData})

此模式实际上在https://facebook.github.io/react/的Facebook ToDo演示应用程序中使用（请参阅“应用程序”一节）。