Question

找到天气并将其显示后，单击摄氏应运行unitHandler，然后将转换温度值，然后更新状态。但是，当更新this.state.currentWeather.temp（一个已经存在的属性，因此我认为它将执行“浅”合并，而只是“更新”状态）时，它将清除当前存在的其余状态属性。

我想知道为什么它不按照React Docs显示here的示例的方式进行“浅”合并，而是清除掉我其余的状态吗？是否是因为React有时会分批进行多个setState()性能调用，如下文档所示？

状态更新可能是异步的React可能会批处理多个setState（）   调用一次更新以提高性能。

由于this.props和this.state可能会异步更新，因此您   不应依赖于它们的值来计算下一个状态。

我想我只是感到困惑，因为在文档下方，它说在更新/合并时将使其他状态保持不变：

状态更新被合并当您调用setState（）时，React合并您提供的当前状态的对象。合并很浅，所以 this.setState（{comments}）保持this.state.posts不变，但是完全替换this.state.comments。

做一些研究，我认为可以通过将prevState函数传递到this.setState中来防止这种情况的发生，但是，我无法使用散布运算符正确编写该函数。

const root = document.querySelector('.root');

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      unit: '',
      currentWeather: {
        main: '',
        desc: '',
        temp: '',
      }
    }
    
    this.getWeather = this.getWeather.bind(this);
    this.unitHandler = this.unitHandler.bind(this);
  }
  
  getWeather(e) {
    e.preventDefault();
    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;
    const appID = 'bf6cdb2b4f3c1293c29610bd1d54512b';
    
      const currentWeatherURL = `https://api.openweathermap.org/data/2.5/weather?q=${city},${country}&units=imperial&APPID=${appID}`;
    const forecastURL = `https://api.openweathermap.org/data/2.5/forecast?q=${city},${country}&units=imperial&APPID=${appID}`;
    
    //fetch CURRENT weather data ONLY
    fetch(currentWeatherURL)
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          unit: '°F',
          currentWeather: {
           main: data.weather[0].main,
           desc: data.weather[0].description,
           temp: data.main.temp,
          }
        });
    })
    .catch(() => {console.log('something went wrong, but we caught the error')});
  }
  
  unitHandler(e) {
    function convertToCelsius(fahrenheit) {
      return ((fahrenheit-32)*5/9)
    }
    
    function convertToFahrenheit(celsius) {
      return ((celsius*9/5) + 32)
    }
    
    //if fahrenheit is checked
    if(e.target.value === 'fahrenheit') {
      const fahrenheitTemp = convertToFahrenheit(this.state.currentWeather.temp);
      this.setState({unit: '°F',currentWeather: {temp: fahrenheitTemp}});
    } 
    //otherwise, celsius is checked
    else {
      const celsiusTemp = convertToCelsius(this.state.currentWeather.temp);
      this.setState({unit: '°C', currentWeather: {temp: celsiusTemp}});
    }
  }
  
  render() {
    console.log('handler state');
      console.log(this.state);
    return (
      <div className='weather-app'>
        <LocationInput getWeather={this.getWeather} unitHandler={this.unitHandler}/>
        <CurrentWeather weatherStats={this.state.currentWeather} unit={this.state.unit} />
      </div>
    )
  }
}

// Component where you enter your City and State 
function LocationInput(props) {
  return (
    <div className='location-container'>
      <form className='location-form' onSubmit={props.getWeather}>
         <input type='text' name='city' placeholder='City'/>
         <input type='text' name='country' placeholder='Country'/>
        <button>Search</button>
        <UnitConverter unitHandler={props.unitHandler} />
      </form>
    </div>
  )
}

// Component to convert all units (fahrenheit <---> Celsius)
function UnitConverter(props) {
  return (
    <div className='unit-converter' onChange={props.unitHandler}>
      <label for='fahrenheit'>
        <input type='radio' name='unit' value='fahrenheit' defaultChecked/>
        Fahrenheit
      </label>
      <label for='celsius'>
        <input type='radio' name='unit' value='celsius'/>
        Celsius
      </label>
    </div>
  )
}

// Base weather component (intention of making specialized components for weekly forecast)
function Weather (props) {
  console.log('component state');
  console.log(props);
   const icons = {
        thunderstorm: <i class="fas fa-bolt"></i>,
        drizzle: <i class="fas fa-cloud-rain"></i>,
        rain: <i class="fas fa-cloud-showers-heavy"></i>,
        snow: <i class="far fa-snowflake"></i>,
        clear: <i class="fas fa-sun"></i>,
        atmosphere: 'No Icon Available',
        clouds: <i class="fas fa-cloud"></i>,
      };
  
  let currentIcon = icons[props.weatherStats.main.toLowerCase()];

  return (
    <div className={'weather-' + props.type}>
      <h1>{props.location}</h1>
      <h2>{props.day}</h2>
      <figure className='weather-icon'>
        <div className='weather-icon'> 
          {currentIcon}
        </div>
        <figcaption>
          <h3 className='weather-main'>{props.weatherStats.main}</h3>
          <div className='weather-desc'>{props.weatherStats.desc}</div>
          {props.weatherStats.temp && <div className='weather-temp'>{Math.round(props.weatherStats.temp)}{props.unit}</div>}
        </figcaption>
      </figure>      
    </div>
  ) 
}

// Using the specialization concept of React to create a more specific Weather component from base
function CurrentWeather(props) {
  const dateObj = new Date();
  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
  const currentDay = days[dateObj.getDay()];
  
  return (
    <Weather 
      type={'current'} 
      weatherStats={props.weatherStats} 
      day={currentDay}
      unit={props.unit}
      />
  )
}

ReactDOM.render(<App />, root);

.weather-app {
  text-align: center;
}

.weather-current {
  display: inline-block;
}

.wf-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class="root"></div>

Answer 1

那是因为您完全替换了当前的天气对象。您必须保留其他当前天气属性，以使其正常运行：

this.setState((state) => ({
    unit: '°C',
    currentWeather: {
        ...state.currentWeather,
        temp: celsiusTemp
    }
}));

当然，对于其他转换方法，您必须执行相同的操作。

Here是有效的示例。

Answer 2

您的setState（）应该如下所示：

this.setState(prevState => ({ 
  ...prevState, 
  currentWeather: { ...prevState.currentWeather, temp: celsiusTemp } 
}));

合并反应状态后出现意外结果

2 个答案: