Javascript 此2.props.addToList未定义，列表创建错误

Diet.js

导出类饮食扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名单：[]，
};
this.addToList=this.addToList.bind（this）；
}
地址列表（项目）{
const list=[…this.state.list，item]；
this.setState（{list}）；
}
render（）{
返回(
)}

食品制造

export class Diet extends Component {
  constructor(props) {
    super(props);
this.state = {
      list: [],
    };
    this.addToList = this.addToList.bind(this);
  }

addToList(item) {
    const list = [...this.state.list, item];
    this.setState({ list });
  }
 render() {

<FoodCreate addToList={this.addToList} />

return (

<FoodList items={this.state.list} />

)}

导出类FoodCreate扩展组件{
建造师（道具）{
超级（道具）；
此.state={
食物名称：“，
卡路里：0，
};
}
render（）{
返回(
this.props.addToList（食物名，卡路里）}
/>
this.setState（{FoodName:FoodName}）}
/>
this.setState（{carries:carries}）
/>

食品商

export class FoodCreate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      FoodName: "",
      calories: 0,
    };
  }

render() {

    return (
<Button transparent>
          <Icon
            name="checkmark"
            style={{ fontSize: 25, color: "red" }}
            onPress={() => this.props.addToList(FoodName, calories)}
          />
        </Button>
<TextInput
            placeholder="Food Name"
            placeholderTextColor="white"
            style={styles.inptFood}
            value={FoodName}
            onChangeText={(FoodName) => this.setState({ FoodName: FoodName })}
          />
            <TextInput
              placeholder="Calories"
              placeholderTextColor="white"
              style={styles.inptMacros}
              keyboardType="numeric"
              value={calories}
              maxLength={5}
              onChangeText={(calories) => this.setState({ calories: calories })}
            />

导出类FoodList扩展组件{
render（）{
返回(
食物
{this.props.items.map（（项目，索引）=>{
返回(
{item.FoodName}
{item.carries}
);
})}
);
}
}
导出默认食物列表；

---

您好，我对编程和React Native还不熟悉，所以我尝试创建一个杂货清单，让用户键入

FoodName

和

Carries

，然后按下图标：签入

FoodCreate

页面，并将其列在

FoodList

页面中，此时我运行代码返回一个错误：

\u this2.props.addToList不是一个函数

，我尝试了许多解决方案，但我不确定错误在哪里。

您的代码无效，令人困惑（添加ToList是采用1个参数还是2个参数？），而且您还没有创建一个可以重现您的问题的示例。

export class FoodList extends Component {

  render() {
    return (
      <Content>
        <List>
          <ListItem itemDivider>
            <Text>Food</Text>
            {this.props.items.map((item, index) => {
              return (
                <ListItem key={index}>
                  <Text>{item.FoodName}</Text>
                  <Text>{item.calories}</Text>
                </ListItem>
              );
            })}
          </ListItem>
        </List>
      </Content>
    );
  }
}

export default FoodList;

class FoodCreate extends Component {
  render() {
    return (
      <Button title="aaa" onPress={() => this.props.addToList('name')}></Button>
    );
  }
}

export default class Diet extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
    this.addToList = this.addToList.bind(this);
  }

  addToList(item) {
    const list = [...this.state.list, item];
    this.setState({list});
  }
  render() {
    return <FoodCreate addToList={this.addToList} />;
  }
}

addToList = item => {
    const list = [...this.state.list, item];
    this.setState({list});
  };