时间戳

首页 > 解决方案 > 如何将用户创建的数组传递给另一个组件？

reactjs - 如何将用户创建的数组传递给另一个组件？

问题描述

我是 React 的新手。事实上，我对任何前端编程语言都很陌生。因此，我遇到了许多非常奇怪，有时甚至是搞笑的问题。我正在努力将数组发送到另一个组件。问题是用户创建了该数组，它是在 render(){return(..)} 内部动态创建的

class Home extends Component {
    constructor(props) {
        super(props)
        this.chosenItems = [];
    }

    state = {
      items: [],
    };
// code to import JSON from backend API, irrelevant, that part works fine
    
addItem(item){
     this.chosenItems.push(item);
     console.log(this.chosenItems); //logs created array, everything works like a charm
    }
render() {
      const {items} = this.state;
        return (
//some code
              <div key={item.id}>
                {item.name} {item.price}<img src = {item.url} className="photo"/><button onClick={() => this.addItem(item)}>ADD</button>
              </div>
<Basket dataFromParent = {this.getItems} />
</div>

和篮子类

class Basket extends React.Component {
    constructor(props) {
        super(props);
        this.chosenItems = [];
    }

    state = {
        items: []
      };
    componentDidUpdate()
    {
        this.chosenItems = this.props.dataFromParent;
        console.log(this.props.dataFromParent);
    }
      
      render() {
        return (
            <div>
            <h2>{this.chosenItems}</h2>
            <h2>{this.props.dataFromParent}</h2>
          </div>
        );
      }
    }
export default Basket;

问题是控制台日志显示“未定义”。你能告诉我我做错了什么吗？或者也许我的整个方法不正确，我应该寻找另一种解决方案？

更新

class Home extends Component {
    state = {
      items: [],
      chosenItems []
    };
// code to import JSON from backend API, irrelevant, that part works fine
    
  addItem(item){
     this.setState(prev => ({
        chosenItems: [...prev.chosenItems, item]
     }))
    }
      render() {
        const {items, chosenItems} = this.state;
          return (
            <div>
            <div><Basket chosenItems ={this.state.chosenItems} /></div>
            <Router>
            <div className="container">
            <ul>
                <Link to="/login">login</Link>
                <Link to="/basket">basket</Link> 
            </ul>
            <Route path="/login" component={Login} />
            <Route path="/basket" component={Basket} />
            </div>
            </Router>
            <div>
            {items.map(item =>
              <div key={item.id}>
                {item.name} {item.price} {item.quantity} <img src = {item.url} className="photo"/><button onClick={() => this.addItem(item)}>Add!</button>
              </div>
            )}
            </div>
            </div> 
          
      );
      }
}

class Basket extends React.Component {
      render() {
        return (
        <div>
            {this.props.chosenItems.map(item =>
              <div key={item.id}>
                {item.name}{item.price}
              </div>
            )}

        </div>
        
        );
      }
    }

这行得通，但是 selectedItems 数组立即打印在哪里

<Basket chosenItems ={this.state.chosenItems} />

位于按下按钮后。当我点击购物篮重定向时，我得到

TypeError: Cannot read property 'map' of undefined

标签： reactjsfrontendreact-component

解决方案

我在片段中看到了几个问题 -

  1. 您将this.getItems作为道具传递给您的子组件。它从未在父级中定义。我认为它应该items是您创建的数组状态。

  2. chosenItems应该是一个状态，你应该更深入地研究如何更新一个状态。有一个setState功能，学习一下。

  3. 在孩子中，构造函数再次像父母一样编写，带有 selectedItems 和不需要的项目。您可以从道具中使用它们。

推荐阅读