javascript - 在另一个函数中调用一个函数被转移到另一个组件

Question

performSearch ()我的目标是通过单击div组件来调用该函数Item。该performSerach ()函数被放置在另一个select ()函数中。该select ()函数被传递给Item组件。在 console.log 中返回 me active = null。

项目

class Items extends Component {
  constructor (props) {
    super(props);
    this.state = {
      items: [],
      active: null,
            abc: null
    }
  }

  select = (id) => {
    this.setState({
            abc: id
    })
    this.performSearch(id);
  }

  componentDidMount() {
    axios.get
        axios({
            url,
            method: "GET",
            headers: {
              'Authorization': `Bearer ${token}`
            }
        })
        .then(res => {
            this.setState({
              items: res.data 
            });
        })
        .catch(error => {
            console.log(error);
        })      
}

performSearch = (id) => {
  axios.get
    axios({
        url: `https://app.com/api/v1/${id}`,
        method: "GET",
        headers: {
          'Authorization': `Bearer ${token}`           
        }
    })
    .then(res => {
        this.setState({
            active: res.data
        });
    })
    .catch(error => {
        console.log(error);
    })
}

  render () {
    <div>
            {this.state.items.map((item, index) => 
                <Item
                        select={this.select}
                />
            )} 
    </div>
  }
}

物品

class Item extends Component {
  render () {
    return (
      <div onClick={()=> this.props.select(this.props.item.id)}>

      </div>
    )
  } 
}

标签： javascriptreactjs

Answer 1

  render () {
    <div>
            {this.state.items.map((item, index) => 
                <Item
                        select={this.select}
                />
            )} 
    </div>
  }

应该将项目传递给Item组件：

  render () {
    <div>
            {this.state.items.map((item, index) => 
                <Item
                        select={this.select}
                        item={item}
                        key={index}
                />
            )} 
    </div>
  }

或者：

  render () {
    <div>
            {this.state.items.map((item, index) => 
                <Item
                        select={() => this.select(item.id)}
                />
            )} 
    </div>
  }