javascript - 在 React 中将一个数组中的值分配给另一个数组

Question

我有以下状态结构:

this.state = {
    data: {
        tags: []
    },
    items: [],
    input: ''
 };

当我提交数据时，我尝试将项目数组数据分配给标签数组。

var newData = this.state.items.slice(); //copy array
this.setState({
    ...this.state,
    data: { ...this.state.data, tags: newData }
});

newData 内部包含所有变量，但 tags 始终为空。如何为标签数组分配完全相同的值？

这是我的控制台日志:

console.log(this.state.data.tags, this.state.items);

enter image description here

更新:

onSubmit = (e) => {
     e.preventDefault();
     const errors = this.validate(this.state.data);
     this.setState({ errors });
     if (Object.keys(errors).length === 0) {
       this.setState({ loading: true });
       this.setState(prevState => ({
          data: {
             ...prevState.data,
             tags: prevState.items
           }
       }));
       console.log(this.state.data.tags, this.state.items);
       this.props
         .submit(this.state.data)
         .catch(err =>
            this.setState({ errors: err.response.data.errors, loading: false })
          );
       }
   };

Answer 1

当您设置状态时，您不会将当前状态传播到您传递的对象中。 setState 接受一个对象作为它的第一个参数，并且仅更新该对象中的键。因此，例如，如果我们有:

this.state = {
  a: 1,
  b: 2
};

使用这个:

this.setState({
  b: 3
});

只会更新b。 a 不会受到影响。另请注意，setState 是异步的 - 并且不能保证在 setState 内引用状态是安全的。因此，React 为您提供了一个回调来访问之前的状态:

this.setState(prevState => ({
  data: { 
    ...prevState.data, 
    tags: prevState.items
  } 
}));

这只会使用先前状态的 items 数组更新状态中的 data 对象以及 tag 属性。