Question

我试图将一个简单的列表从父级传递给一组子组件，我不能传递一个函数。我有一些直线的东西，这是完全相同的血腥的东西，但这不会。

有谁看到出了什么问题？

这是我无法达到的父级函数（console.log未触发）：

setClassImage(name, image){
     console.log('inside setClassImage');
     var TitleArray = this.state.TitleArray;
     TitleArray[0] = name;
     var ImageArray = this.state.ImageArray;
     ImageArray[0] = image;
     this.setState({
       characterModal: false,
       equipmentModal: false,
       TitleArray: TitleArray,
       ImageArray: ImageArray
     });
   }

在父级中设置列表：

   let listClasses;

           if(this.state.classResults.length!=0){
                 listClasses = this.state.classResults.map((item,i) => {
                   return (
                     <ListClass key={i} classes={item} setClassImage={this.setClassImage.bind(this)}/>
                   );
                 });
           }

在父母的渲染中

：

        <SelectorBox>
          <ListBox>
            {listClasses}
            <br/>
          </ListBox>
          <SelectorButton onClick={(e)=>this.cancelChange(e)}>No Class</SelectorButton>
        </SelectorBox>

在孩子身上：

class ListClass extends Component{
  constructor(props){
    super(props);
    this.state={

    }
  }

  getImage(e){
    e.preventDefault();
    var self = this;
    axios.post('http://localhost:5000/post2/characterimage', {
      search: this.props.classes,
    })
      .then((response)=>{
       console.log('response from the pixabay call ', response.data);
       self.props.setClassImage(self.props.classes, response.data);
      })
     .catch(()=>{
       console.log('hello axios error');
     });
  }

    render(){
      return(
        <div>
          <ItemContainer onClick={(e)=>this.getImage(e)}>
            <p>
              {this.props.classes}
            </p>
          </ItemContainer>
        </div>
      )
    }
}

我可以看到console.log('response from the pixabay call ', response.data);，它会从后端的数据中正确触发。但是没有调用该函数！奇怪的命名容器纯粹是为了造型，所以假设它们都像div一样。

Answer 1

.then（）调用中的箭头函数会自动将其绑定到正确的上下文，因此您不需要执行var self = this;但是，您需要在构造函数中绑定getImage函数。或者

将您的功能定义更新为：

  ....
  getImage = (e) => {
    e.preventDefault();
    axios.post('http://localhost:5000/post2/characterimage', {
      search: this.props.classes,
    })
      .then((response) => {
       console.log('response from the pixabay call ', response.data);
       this.props.setClassImage(this.props.classes, response.data);
      })
     .catch(()=>{
       console.log('hello axios error');
     });
  }

  ....
}

否则，在构造函数中绑定getImage：

constructor(props){
    super(props);
    this.state = {};

    this.getImage = this.getImage.bind(this);
  }

无法将函数从父级传递给React子级（通过列表）

1 个答案: