Question

这是一个名为react-share的开源项目，其ShareButton组件具有一个名为beforeOnClick的道具，您可以将其传递给它。我正在使用beforeOnClick将图片上传到我们的CDN，以便我们不必上传不必要共享的图片，这会导致传递给按钮的url道具进行更新。

我当前的问题是，beforeOnClick运行后，共享按钮当前无法处理更新的url道具。

基本上，我有一个异步函数，看起来像这样：

const handleClick = async () => {
  const { url, disabled, beforeOnClick } = this.props;

  // beforeOnClick can cause this.props to change. beforeOnClick can also perform async operations, like making a fetch call
  if (beforeOnClick) {
    await beforeOnClick();

    // call setTimeout to delay the next handleClick call in order to ensure this.props 
    // properly reflects changes from the parent component
    setTimeout(handleClick);
    return;
  }

  // Do stuff with url & disabled
};

为了使问题简单起见，我将其简化了，但是如果您想查看我目前拥有的代码，请check out my fork.与the original进行比较。

setTimeout是实现此效果的可靠方法吗？或者，我应该改为执行以下操作：

this.setState({ __rerender_component: true }, handleClick);

我不是那种解决方案的忠实拥护者，因为在回调运行后，我必须设法重置该标志。任何想法表示赞赏！

编辑：使用setTimeout似乎可以，但是我不确定它是否可靠。如果失败1/100次，那就糟透了。

Answer 1

使用setState来获取道具的本地副本，并让beforeOnClick函数使用setState可能最简单，并且感觉更“反应”？

例如（请注意，我仅在最新项目中使用了钩子，所以可能会关闭）

const handleClick = async () => {   
   this.state = this.props; // can all props be changed?

if (beforeOnClick) {
    await beforeOnClick(this.setState);


 // Do stuff with this.state.url & this.state.disabled };

和beforeOnClick可以使用setState更改URL和其他URL。

您可能希望采用其他方法，而不是完全控制setState：

 let newState= await beforeOnClick();
 if (newState && newState.url && !newState.url.startsWith("http"))
   throw 'url must start with http'; 
 // that might be a wrong assumption, take it as an example

 // whatever else you want to check, like disable is a boolean...

 this.setState({...state, ...newState});

我如何获得更新的道具异步功能？

1 个答案: