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

Question

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

我有一个用于订购食物的页面。有两个 react-search 组件，一个对应你今天想收到的食物，另一个对应 'later'。因此，我将相同的食物列表传递给 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>
        )
    }
}

在这里，我试图将每个组件的新食品列表（selected 食品）传递回创建订单组件。

现在这里的第一个问题是我会得到一个 TyperError: this.props.updateNowOrders 不是一个函数，当我尝试 select 稍后的一些命令时.我很欣赏这是糟糕的设计。我试图通过 try & catch 块将它们分开，使用 e instanceof TypeError... 但这不起作用。

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

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

打字错误：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});
}

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

Passing two different lists of data for each instance of a child component?

javascript

flux

reactjs

redux