Question

我正在尝试在嵌套状态内更改一个值。

我有一个名为toDoItems的状态，其中充满了componentDidMount的数据

问题在于更改值可以正常工作，我可以使用console.log进行检查，但是当我再次转到setState然后再console.log时，值似乎什么都没有变了吗？

这是现在的所有代码

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toDoItems: null,
      currentView: "AllGroup"
    };
  }

  componentDidMount = () => {
    fetch("/data.json")
      .then(items => items.json())
      .then(data => {
        this.setState({
          toDoItems: [...data],
        });
      })
  };

  changeToDoItemValue = (givenID, givenKey, givenValue) => {
    console.log(this.state.toDoItems);
    let newToDoItems = [...this.state.toDoItems];
    let newToDoItem = { ...newToDoItems[givenID - 1] };
    newToDoItem.completedAt = givenValue;
    newToDoItems[givenID - 1] = newToDoItem;
    console.log(newToDoItems);
    this.setState({
     toDoItems: {newToDoItems},
    })
    console.log(this.state.toDoItems);
  };

  render() {
    if (this.state.toDoItems) {
      // console.log(this.state.toDoItems[5 - 1]);
      return (
        <div>
          {
            this.state.currentView === "AllGroup" ?
              <AllGroupView changeToDoItemValue={this.changeToDoItemValue}/> :
              <SpecificGroupView />
          }

        </div>
      )
    }
    return (null)
  };
}

class AllGroupView extends Component {
  render() {
    return (
      <div>
        <h1 onClick={() => this.props.changeToDoItemValue(1 , "123", "NOW")}>Things To Do</h1>
        <ul className="custom-bullet arrow">
        </ul>
      </div>
    )
  }
}

所以我的console.log可以看到这种情况

console.log(this.state.toDoItems);

，然后使用console.log(newToDoItems)

，然后在console.log(this.state.toDoitems)之后再次使用setState

Answer 1

React中的状态更新是异步的，因此您不应期望下一条语句本身具有更新的值。相反，您可以尝试类似的操作（在setState回调中记录更新的状态）：

    this.setState({
     toDoItems: {newToDoItems},// also i doubt this statement as well, shouldn't it be like:  toDoItems: newToDoItems ? 
    },()=>{
       //callback from state update
       console.log(this.state.toDoItems);
    })

我无法更改现有状态的数组

1 个答案: