Question

所以我正在为食谱制作一个反应应用程序，并从JSON文件中提取数据。由于某种原因，配方的.filter和.map没有显示为函数。非常感谢任何帮助。

大多数示例看起来您可以在渲染下添加此信息。我是一个编码和反应的菜鸟，所以我确定这是用户错误。

\r\n

}

import React from 'react';
import ReadInput from'./readInput';
import '../Styles/Home.css';

 class Input extends React.Component{
     constructor(props) {
         super(props);
     this.state = {
         value:''
     }
     this.handleName = this.handleName.bind(this);
 };
handleName(e){
    console.log('handleName')
    if(e === 'chicken'){
            this.setState({value: 1})
        } else if (e === 'beef') {
            this.setState({value: 2})
        } else if (e === 'rice'){
            this.setState({value: 3})
        }

}


render(){
    const menu = this.props.data.filter((recipe) => {
            if(recipe.id === this.state.value){
            return recipe.dish;
        }
    })
    .map(recipe => {
        return(
            <div>
            <li key={recipe.id}>{recipe.dish}</li>
            <li >{recipe.ingredients}</li>
            </div>
        )
    })

    return(
        <div>
            <ReadInput
                onChange={this.handleName} />
            <button className="homeButton" onClick={this.menu}>Click</button>
            <ul className='listStyle'>
                {menu}
            </ul>
        </div>
    )
}

app文件

export default Input;

}

导出默认App;

Answer 1

使用超时功能或检查您的响应，它可能稍后出现，然后函数才能运行。使用超时并检查它。

if (timerid) {
 clearTimeout(timerid);
}

timerid = setTimeout(() => {
 this.reqMaq(obj['fkmaqid'])
}, 2000);

Answer 2

如果this.props.data是对象，则无法直接映射或过滤它。我认为这应该有效：

const recipes = this.props.data;
const menu = Object.keys(recipes).filter((recipeKey) => recipes[recipeKey].id === this.state.value)
.map(recipeKey => 
  return (
    <div key={recipes[recipeKey].id}>
      <li>{recipes[recipeKey].dish}</li>
      <li>{recipes[recipeKey].ingredients}</li>
    </div>
  );
});

首先，您过滤this.props.data的键，只获得与州内ID匹配的食谱的键。然后映射（仍然使用对象的键映射，而不是值）并创建列表。

请注意，我已将键属性移至<div>标记，因为您需要在地图返回的组件中使用此属性，而不是在其子项中。

此外，在<button className="homeButton" onClick={this.menu}>Click</button>中，onClick属性接收菜单，但它应该会在单击按钮时收到要执行的函数。

React组件无法将.filter识别为函数

2 个答案: