Question

我正在评估一个React应用程序（请参见下面的代码）。我知道setState道具等的含义是什么，以及它的整体工作原理，但我不知道以下含义：this.setState(defaultDogs);

我想知道这是否是标准状态更新的简写。我不确定它是否更新了Dogs状态或添加了一个新的状态。

以下是该语句所在的代码，后跟// <<<<<<<<<<:

import React, { Component } from 'react';
import Dogs from './components/Dogs';
import DogItem from './components/DogItem';
import AddDog from './components/AddDog';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      dogs: []
    };
  }

  getDogs() {
    var defaultDogs = {dogs: [
      {
        name: 'Princess',
        breed: 'Corgi',
        image: 'https://s-media-cache-ak0.pinimg.com/originals/51/ae/30/51ae30b78696b33a64661fa3ac205b3b.jpg'
      },
      {
        name: 'Riley',
        breed: 'Husky',
        image: 'http://portland.ohsohandy.com/images/uploads/93796/m/nice-and-sweet-siberian-husky-puppies-for-free-adoption.jpg'
      },
    ]};
    this.setState(defaultDogs); // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  }

  componentWillMount() {
    this.getDogs();
  }

  handleAddDog(dog) {
    let dogs = this.state.dogs;
    dogs.push(dog);
    this.setState({dogs:dogs});
  }

  handleDeleteDog(name) {
    let dogs = this.state.dogs;
    let index = dogs.findIndex(x => x.name === name);
    dogs.splice(index, 1);
    this.setState({dogs:dogs});
  }

  render() {
    return (
      <div className="App">
        <Dogs dogs={this.state.dogs} onDelete={this.handleDeleteDog.bind(this)} />
        <AddDog addDog={this.handleAddDog.bind(this)} />
        <hr />
      </div>

    );
  }
}

export default App;

Answer 1

setState对状态和所传递的参数进行浅表合并（即它将状态中的dogs的值替换为参数中的dogs的值）。在该行之后，状态为：

{
  dogs: [
    {
      name: 'Princess',
      breed: 'Corgi',
      image: 'https://s-media-cache-ak0.pinimg.com/originals/51/ae/30/51ae30b78696b33a64661fa3ac205b3b.jpg'
    },
    {
      name: 'Riley',
      breed: 'Husky',
      image: 'http://portland.ohsohandy.com/images/uploads/93796/m/nice-and-sweet-siberian-husky-puppies-for-free-adoption.jpg'
    }
  ]
}

通过像handleAddDog中那样进行添加，方法是采用当前状态，并用具有多余狗的新状态替换它（理想情况下无需修改先前的状态，这不会在上面的代码中反映出来）。 / p>

编辑：上一条陈述是错误的。

由于setState是异步的，因此您将无法直接在调用它的函数中观察状态的变化。您可能会在作为setState的第二个参数提供的回调中看到它，因为状态更新完成后将调用该回调。

Answer 2

它正在替换状态中“ dogs”属性的值。

Answer 3

这不是标准状态更新的简写，因为您为函数提供了一个对象。就像您在写一样： this.setState（{dogs：[...]}）

缩短拼写是 this.setState（{dogs：dogs}）; this.setState（{dogs}）

Answer 4

它将变量dogs的状态设置为defaultDogs.dogs变量内容。

ReactJS：“ this.setState（defaultDogs）;”是什么？这个代码是什么意思？

4 个答案: