为什么 setState 没有设置将我的数组附加到状态？

IT技术 javascript reactjs
2021-03-23 22:26:22

我必须创建一个文本区域，它采用多个链接，然后我split()进入数组是它工作正常，但我想将该数组设置到我的输入state中，linkList: []但是当我单击按钮提交时，它在我初始化时给了我空数组。但是当我再次按下提交按钮时，它会给出我想要的列表，为什么？这是代码和输出

onSubmit = event => {
    this.setState({ loading: true, host: undefined });
    const { text, linkList } = this.state;

    console.log(text);
    const mList = text.split("\n").filter(String);
    console.log(mList);
    this.setState({
      linkList: [...mList]
    });
    console.log(linkList);

    event.preventDefault();
  };

输出控制台（第一次点击）

youtube.com
google.com
facebook.com
------------------------------------------------------------
["youtube.com", "google.com", "facebook.com"]
------------------------------------------------------------
[]

输出控制台（第二次点击）

youtube.com
google.com
facebook.com
--------------------------------------------- 
["youtube.com", "google.com", "facebook.com"]
---------------------------------------------
["youtube.com", "google.com", "facebook.com"]
3个回答

setState是异步的。这意味着它不会立即发生，而是在很短的时间内发生。如果添加：

console.log(linkList)

在渲染方法的顶部，您将看到按照您的预期附加的项目。

它可能正在附加，直到下一次渲染才可用。

从文档：

setState()并不总是立即更新组件。它可能会批量更新或推迟更新。这使得this.state在调用setState()潜在陷阱后立即阅读。相反，使用componentDidUpdate或setState回调 ( setState(updater, callback))，这两者都保证在应用更新后触发。

下面的代码可能会有所帮助。

onSubmit = event => {
    this.setState({ loading: true, host: undefined }, () => {
      const { text, linkList } = this.state;

      console.log(link);
      const mList = text.split("\n").filter(String);
      console.log(mList);
      this.setState({
        linkList: [...mList]
      }, () => {
        console.log(linkList);
        event.preventDefault();
      });
    });
  };
其它你可能感兴趣的问题
上一篇基于对象列表渲染 ReactJS 组件 下一篇React 路由器 - url 更改，没有渲染