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

Question

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

我有一个用于订购食物的页面。有两个 react 搜索组件，一个对应于您今天想要收到的食物，另一个对应于“稍后”。因此，我将相同的食物列表传递给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 不是函数。我很欣赏这是糟糕的设计。我尝试通过 try & catch block 和 e instanceof TypeError 将两者分开...但这不起作用。

我收到的第二个 TypeError 是在订单组件内。当食物列表与需要订购的食物一起传回时...然后我得到 TypeError: Cannot set property '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

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>

类型错误:无法设置未定义的属性“selectedForNow”

您可以阅读here关于设置状态。您应该像这样使用这个方法:

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