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

Question

我是 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

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>
        
        );
      }
    }

这行得通，但是 chosenItems 数组会立即打印出来，其中

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

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

TypeError: Cannot read property 'map' of undefined

Answer 1

我在代码片段中发现了几个问题 -

您正在将 this.getItems 作为道具传递给您的子组件。它从未在父级中定义。我认为它应该是您创建的 items 数组状态。
chosenItems 应该是一个状态，你应该更深入地研究如何更新状态。有一个setState功能，学学吧
在子级中，构造函数的编写方式与父级的构造函数一样，带有 chosenItems 和不需要的项目。您可以从道具中使用它们。

Answer 2

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

其次，从parent传过来的数据不需要再存储到child中，可以直接从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 Basket extends React.Component {
      
      render() {
        return (
            <div>
            <h2>{this.props.chosenItems.map(item=> <div>{item.name}</div>)}</h2>
          </div>
        );
      }
    }

 export default Basket;

Answer 3

请查看 https://reactjs.org/docs/react-component.html#setstate 如何改变组件的状态。您将在本文档中找到更多基础知识。您在日志中得到 undefined 的原因是因为 Home 组件中的 this.getItems() 返回 undefined 没有这样的方法或者可能状态变量本身是 undefined。

简而言之，有几点：

当你想将数组传递给子组件时，就像传递任何对象一样简单，或者属性例如。（我希望你想将选择的项目传递给篮子组件）

始终在构造函数中初始化状态。所以 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 Basket extends React.Component {
      
      render() {
        return (
            <div>
            {this.props.dataFromParent.map(item =>  <h2>{this.props.dataFromParent}</h2>)}
          </div>
        );
      }
    }
export default Basket;

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

How to pass an user-created array to another component?

reactjs

frontend

react-component