Question

我正在尝试通过父对象将一个对象从一个同级传递到另一个。

同胞包含一个页面列表：

    this.state = {pages: [
        {pageTitle: 'Home', pageDesc:'', items: [], id:''},
        {pageTitle: 'About', pageDesc:'', items: [], id:''},
        {pageTitle: 'Contact', pageDesc:'', items: [], id:''},
        {pageTitle: 'Contact', pageDesc:'', items: [], id:''}
    ]}

以及从父级接收数据的功能

update = () => {
    let newPageList = [...this.state.pages, this.props.addToList];
    this.setState({pages: newPageList})
}

同级的两个包含按下按钮时需要添加到以上页面列表中的项目：

this.state = {
    pageTitle: 'New page', pageDesc:'New desc', items: [], id:''
}

还有一个将状态传递给父级的函数：

addNewPage = () => {
    let info = {...this.state};
    this.props.callBack(info)
}

这是父组件

constructor(props){
    super(props);
    this.state={
        data: {
            pageTitle: '', pageDesc:'', items: [], id:''
        }
    }
}

updatePageList = (pageAdded) =>{
    this.setState({data:pageAdded});
    console.log(this.state)
}

render(){
    return(
        <div>
        <PageBuilder callBack={this.updatePageList} />
        <PageList addToList={this.state.data} />
        </div>
     )
}

Answer 1

我不知道您的确切问题是什么，但是我建立了一个示例，显示ChildOne添加了一个列表，然后该列表通过ChildTwo作为父级传递给App，然后将列表呈现到视图中。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }
  
  addToList = (data) => {
    this.setState({ list: [...this.state.list, data] }, () => console.log('Parent\'s List (from callback):', this.state.list.join(' '))) 
    console.log('Parent\'s List (just after setState):', this.state.list.join(' '))
  }
  
  componentDidUpdate() {
    console.log('Parent\'s List (componentDidUpdate):', this.state.list.join(' '))
  }
  
  render() {
    return (
      <div>
        <ChildOne addItem={this.addToList}/>
        <ChildTwo list={this.state.list}/>
      </div>
    )
  }
}

class ChildOne extends React.Component {
  constructor(props) {
    super(props);
    this.i = 0;
  }
  
  render() {
    return (
      <div>
        <h1>ChildOne</h1>
        <button onClick={() => this.props.addItem(this.i++)}>Add</button> {/*Note the arrow function inside onClick, it'll error without it*/}
      </div>
    )
  }
}

class ChildTwo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mylist: props.list
    }
  }
  
  //This one!
  componentWillReceiveProps(props) {
    this.setState({mylist: props.list}, () => console.log('Child Two\'s List (from callback):', this.state.mylist.join(' ')))
    console.log('Child Two\'s List (just after setState):', this.state.mylist.join(' '))
  }
  
  componentDidUpdate() {
    console.log('Child Two\'s List (componentDidUpdate):', this.state.mylist.join(' '))
  }
  
  render() {
    return (
      <div>
        <h1>ChildTwo</h1>
        {this.state.mylist.join(' ')}
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

在同级组件之间传递对象-React JS

1 个答案: