Question

我有一些存储在本地存储中的值。当我的组件安装时，我想将这些值加载到状态中。但是，只有最后添加的属性才会添加到状态中。我检查了localStorage上的值，它们都在那里。此外，当我在条件块中记录变量（desc，pic或foo）时，它们就在那里。

我首先想到每个后续if块都在重写状态，但事实并非如此，因为我正确使用了扩展运算符（我想！），在所有预先存在的属性之后添加新属性。 / p>

我认为问题在于，在第一个if块中设置状态之前，最后一个if块中的代码正在运行。如何编写代码，以便从本地存储中获取所有三个属性到状态？

//what I expect state to be
{
  textArea: {
    desc: 'some desc',
    pic: 'some pic',
    foo: 'some foo'
  }
}

//what the state is
{
  textArea: {
    foo: 'some foo'
  }
}

  componentDidMount () {

    const desc = window.localStorage.getItem('desc');
    const pic = window.localStorage.getItem('pic');
    const foo = window.localStorage.getItem('foo');

    if (desc) {
      console.log(desc) //'some desc'
      this.setState({
        ...this.state,
        textArea: {
          ...this.state.textArea,
          desc: desc,
        },
      }, ()=>console.log(this.state.textArea.desc)); //undefined
    }

    if (pic) {
      console.log(pic) //'some pic'
      this.setState({
        ...this.state,
        textArea: {
          ...this.state.textArea,
          pic: pic,
        },
      }, ()=>console.log(this.state.textArea.pic)); //undefined
    } 

    if (foo) {
      console.log(foo) //'some foo'
      this.setState({
        ...this.state,
        textArea: {
          ...this.state.textArea,
          foo: foo,
        },
      }, ()=>console.log(this.state.textArea.foo)); //'some foo'
    } 
  }

Answer 1

您很可能通过浅层合并传递的参数来反应批处理setState调用。这将导致仅应用最后一次更新。您可以通过仅调用setState一次来解决此问题，例如：

  componentDidMount () {

    const desc = window.localStorage.getItem('desc');
    const pic = window.localStorage.getItem('pic');
    const foo = window.localStorage.getItem('foo');

    this.setState({
        textArea: Object.assign({},
            desc ? { desc } : {},
            pic ? { pic } : {},
            foo ? { foo } : {}
        )
    });
  }

另一个版本是将更新函数传递给setState而不是更新对象，这可以安全地用于多个调用。该函数传递两个参数：前一个状态和当前道具 - 无论你从函数返回什么，都将被设置为新状态。

  componentDidMount () {

    const desc = window.localStorage.getItem('desc');
    const pic = window.localStorage.getItem('pic');
    const foo = window.localStorage.getItem('foo');

    this.setState(prevState => {
        if (desc) {
            return {
                textArea: {
                   ...prevState.textArea,
                   desc
                }
            }
        } else {
            return prevState;
        }
    });
    // Repeat for other properties
  }

使用这种方法有点冗长，但确实提供了在组件外部提取状态更新功能以实现可测试性的机会：

  // Outside component
  const updateSubProperty = (propertyName, spec) => prevState => {
      return {
          [propertyName]: {
             ...prevState[propertyName],
             ...spec
          }
      }
  }

  const filterNullProperties = obj => {
      return Object.keys(obj).reduce((out, curr) => {
          return obj[curr] ? { ...out, [curr]: obj[curr] } : out;
      }, {});
  }

  componentDidMount () {
      this.setState(updateSubProperty("textArea",
          filterNullProperties(
              desc: window.localStorage.getItem('desc'),
              pic: window.localStorage.getItem('pic'),
              foo: window.localStorage.getItem('foo')
          )
      ));
  }

这种方式增加了一些复杂性，但（在我看来）提供了一个真正可读的组件，我们未来的自我很清楚我们想要实现的目标。

使用spread运算符连续多次setState

1 个答案: