为子组件的每个实例传递两个不同的数据列表？

Question

我是 ReactJS 的新手，我正在使用 react-search npm 包： https://www.npmjs.com/package/react-search

我有一个用于订购食物的页面。有两个反应搜索组件，一个对应于您今天想收到的食物，另一个对应于“稍后”。因此，我将相同的食物列表传递给 reactSearch 的两个实例：

<label> Add for now: </label>
<ReactSearch list={foods} updateFoods={this.updateNowOrders}></ReactSearch>
<label> Add for later: </label>
<ReactSearch list={foods} updateFoods={this.updateLaterOrders}></ReactSearch>

ReactSearch 代码如下：

import Search from 'react-search'
import ReactDOM from 'react-dom'
import React, { Component, PropTypes } from 'react'

export default class ReactSearch extends Component {

    update(foods) {
        this.props.updateNowOrders(foods);
        this.props.updateLaterOrders(foods);      
    }

    render () {

        var foods = this.props.list;

        return (
        <div>

            <Search foods={foods}
                    placeholder='Search foods'
                    maxSelected={}
                    multiple={true}
                    onItemsChanged={this.update.bind(this)} />
        </div>
        )
    }
}

在这里，我尝试将每个组件的新食物列表（选定的食物）传递回创建订单组件。

现在这里的第一个问题是，当我尝试为以后选择一些订单时，我会得到一个 TyperError: this.props.updateNowOrders is not a function。我很欣赏这是糟糕的设计。我试图通过 try & catch 块将你们两个分开，使用 e instanceof TypeError ... 但这不起作用。

我得到的第二个 TypeError 在 order 组件中。当食物列表与需要订购的食物一起传回时......然后我得到 TypeError: Cannot set property 'selectedForNow' of undefined. 两个函数在order组件中的实现如下：

constructor(props, context) {
    super(props, context);

    this.state = {
        foods: [],
        selectedForNow: [],
        selectedForLater: []
    };

};

updateSelectedForNow(data) {         
    this.setState.selectedForNow = data;
}

updateSelectedForLater(data) {     
    this.setState.selectedForLater = data;    
}

有什么想法吗？

提前谢谢:)

Answer 1

TyperError: this.props.updateNowOrders

发生这种情况是因为您的属性不是称为updateNowOrders 而是updateFoods，您可能应该使用相同的名称，例如updateOrders：

<label> Add for now: </label>
<ReactSearch list={foods} updateOrders={this.updateNowOrders}></ReactSearch>
<label> Add for later: </label>
<ReactSearch list={foods} updateOrders={this.updateLaterOrders}></ReactSearch>

TypeError：无法设置未定义的属性“selectedForNow”

您可以阅读here 关于 setState。这是一个你应该像这样使用的方法：

updateSelectedForNow(data) {         
      this.setState({selectedForNow: data});
}