运行提交前的 setState 由于异步而没有提交正确的信息

Question

我正在尝试运行在用户单击提交时设置状态之前的一个函数，但由于它是异步的，我没有得到我正在寻找的信息。该函数将一个字符串拆分为一个数组，然后在提交之前将其设置为状态：

const [post, setPost] = useState({ title: '', description: '', tags: [] });
const [tagInput, setTagInput] = useState('');

const handleSubmit = (e) => {
    e.preventDefault();
    setPost((prevState) => ({
      ...prevState,
      tags: [
        ...tagInput
          .split(',')
          .splice(2)
          .map((value) => value.trim().replace(/[\W_]+/g, '')),
      ],
    }));
   createPost(post)
          .then((response) => console.log(response))
          .catch((err) => console.log(err));
};

这些值来自包含用户提交的 'tags' 的输入。

<input
  type='text'
  placeholder='politics, humanitarian, nationalParks'
  name='tags'
  className='post-form-input'
  value={tagInput}
  onChange={handleTagInput}
/>

该输入的值设置为另一个状态：

const [tagInput, setTagInput] = useState('');

如上所示，然后对其进行解析并设置为我的 'post' 状态。 onSubmit() 我正在丢失标签，它们没有保存。我怎样才能实现这个来保存数组？

Answer 1

我能想到你可以做的三个选项：

去掉handleSubmit中的createPost部分，创建一个useEffect 这取决于 post，如果 post 有效，您可以从那里发送它们。
创建一个依赖于 tagInput 并更新的 useEffect post 因此，post 将在您提交时准备就绪。
直接从 handleTagInput 更新 post，我猜这设置了 tagInput 和 post 也将在提交时准备就绪。

运行提交前的 setState 由于异步而没有提交正确的信息

running setState right before submit is not submitting the correct information due to it being asynchronous

javascript

jsx

reactjs

运行 提交前的 setState 由于异步而没有提交正确的信息

running setState right before submit is not submitting the correct information due to it being asynchronous

javascript

jsx

reactjs

运行提交前的 setState 由于异步而没有提交正确的信息