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

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

---

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

您正在将

this.getItems

作为道具传递给您的子组件。它从未在父级中定义。我认为应该是您创建的

items

数组状态

chosenItems

应该是一个状态，您应该深入了解如何更新状态。有一个

setState

功能，学习它

在child中，构造函数也是像父类一样编写的，带有chosenItems和不需要的items。你可以从道具上使用它们

---

首先，您必须了解，未设置为状态的内容不会导致重新渲染，因此更新的数据不会反映到UI或传递到子级

其次，您不需要将从父级传递的数据再次存储到子级，您可以直接从props使用它

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} = this.state;
        return (
          <div>
            //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 chosenItems ={this.state.chosenItems} />
          /div>
       )
   }
}
      

class Home扩展组件{
状态={
项目：[]，
chosenItems[]
};
//从后端API导入JSON的代码，不相关，这部分工作正常
附加项（项目）{
this.setState（prev=>({
chosenItems:[…prev.chosenItems，item]
}))
}
render（）{
const{items}=this.state；
返回(
//一些代码
{item.name}{item.price}this.addItem（item）}>ADD
/div>
)
}
}

class.Component{
render（）{
返回(
{this.props.chosenItems.map（item=>{item.name}}
);
}
}
出口违约篮子；

请查看如何改变组件的状态。您将在本文档中找到更多的基础知识。 日志中出现

undefined

的原因是主组件中的

this.getItems（）

正在返回

undefined

，或者没有这样的方法，或者状态变量本身可能是

undefined

简而言之，有几件事：

当您想要将数组传递给子组件时，只需为例如传递任何对象或属性即可（我希望您想要将所选项目传递给Basket组件）

始终在构造函数中初始化状态。 所以chooseItems和items应该是状态和构造函数内部的一部分

您的代码应该如下所示：

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            chosenItems: [],
            items: [],
        }
    }
    
    addItem(item){
        this.setState({
            chosenItems: [...this.state.chosenItems, item]
        })
        console.log(this.chosenItems); //logs created array, everything works like a charm
    }

    render() {
      const {items, chooseItems} = this.state;
        return (
            items.map(item => {
                return (
                    <div key={item.id}>
                        {item.name} {item.price}<img src = {item.url} className="photo"/>
                        <button onClick={() => this.addItem(item)}>ADD</button>
                    </div>
                )
            })
            <Basket dataFromParent={chooseItems} />
            div>
        )
    }
}

class Home扩展组件{
建造师（道具）{
超级（道具）
此.state={
选择项目：[]，
项目：[]，
}
}
附加项（项目）{
这是我的国家({
chosenItems:[…this.state.chosenItems，item]
})
console.log（this.chosenItems）；//创建了日志数组，一切都像一个符咒
}
render（）{
const{items，chooseItems}=this.state；
返回(
items.map（item=>{
返回(
{item.name}{item.price}
this.addItem（item）}>ADD
)
})
div>
)
}
}

篮子组件不需要构造函数，因为所需数据来自父组件：

class Basket extends React.Component {
      
      render() {
        return (
            <div>
            {this.props.dataFromParent.map(item =>  <h2>{this.props.dataFromParent}</h2>)}
          </div>
        );
      }
    }
export default Basket;

class.Component{
render（）{
返回(
{this.props.dataFromParent.map（项=>{this.props.dataFromParent}}
);
}
}
出口违约篮子；

由于某种原因，当数组由ID组成时，它可以工作，但我有另一个问题。阵列将在其所在位置打印。但当整个对象被传递时，程序在按下“添加”按钮后崩溃。这是因为，为了渲染数组，需要在其上进行映射。更新了我的答案，谢谢。成功了。但是有一个小问题。当我单击添加时，数组立即显示在上面问题中没有显示路由的地方。好的，我刚刚更新了帖子。如果你是新手，强烈建议你开始使用功能组件而不是类组件。你最终将不得不使用它们。所以，现在比以前更好了，你已经适应了班级的生活。

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

        </div>
        
        );
      }
    }

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

TypeError: Cannot read property 'map' of undefined

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} = this.state;
        return (
          <div>
            //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 chosenItems ={this.state.chosenItems} />
          /div>
       )
   }
}
      

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

 export default Basket;

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            chosenItems: [],
            items: [],
        }
    }
    
    addItem(item){
        this.setState({
            chosenItems: [...this.state.chosenItems, item]
        })
        console.log(this.chosenItems); //logs created array, everything works like a charm
    }

    render() {
      const {items, chooseItems} = this.state;
        return (
            items.map(item => {
                return (
                    <div key={item.id}>
                        {item.name} {item.price}<img src = {item.url} className="photo"/>
                        <button onClick={() => this.addItem(item)}>ADD</button>
                    </div>
                )
            })
            <Basket dataFromParent={chooseItems} />
            div>
        )
    }
}

class Basket extends React.Component {
      
      render() {
        return (
            <div>
            {this.props.dataFromParent.map(item =>  <h2>{this.props.dataFromParent}</h2>)}
          </div>
        );
      }
    }
export default Basket;