ReactJS-将onClick函数的一部分作为来自父组件的道具传递

Question

嘿，伙计们，我正在尝试从父级向子级组件传递道具中的命令。问题是，在我的按钮被点击后，父组件中的一个状态必须被改变，以打开预期的侧栏。我似乎对onClick函数末尾的.then（）部分没有把握，因为我得到了错误：×未处理的拒绝（TypeError）：无法读取未定义的属性“then”

子组件：

return (
          <div
            className="results-item"
            onClick={async () => {
              let place_detail;
              try {
                const URL = `https://maps.googleapis.com/maps/api/place/details/json?place_id=${places.place_id}&fields=name,rating,formatted_phone_number&key=
      MYAPIKEY`;
                const response = await axios.get(URL);
                console.log(response.data);
                place_detail = response.data.results;
              } catch (error) {
                console.log(error.message);
              }

              this.setState({ place_detail }).then(this.props.sideBarOpen);
            }}
          >
            <ResultsItem
              name={places.name}
              image={Thumbnail}
              rating={places.rating}
              rating_total={places.user_ratings_total}
            />
          </div>
        );

父组件：

<Search sideBarOpen={() => setOpen(!open)} />

Answer 1

不能在setState调用中使用。你可以使用setState的回调函数来做你想做的事情-

this.setState({ place_detail }, () => this.props.sideBarOpen());

Answer 2

setState不返回promise。使用回调代替：

this.setState({ place_detail }, () => {
   this.props.sideBarOpen();
});