reactjs:setState在调用一次的函数中被调用两次？为什么？

Question

编辑：由于代码剪贴不会重现错误-这里有一个指向github repo的链接：（代码远未完成）

https://github.com/altruios/clicker-game

我现在已经在两台计算机上运行了它——这两台计算机都有相同的行为，而代码剪报并没有显示出来。

//interestingly enough, this works just fine, where the same code I run locally has the doubling.
//when I comment out ALL other code except for this code I STILL get the error locally
//at this point the only difference is import export of components... here they are in one file.
//below is original code from file (
/* 
FILE::::Clicker.js
 
import React from 'react';

function Clicker(props)	
	{
	return(
		<div>
		{props.name}
		<button 
			name={props.name} 
			onClick={props.HandleClick} 
			data-target={props.subjectsOfIncrease}> 
				{props.name} {props.value}
	
		</button>
		</div>


		)
}

export default Clicker;

FILE:: Resouce.js

import React from 'react';
function Resource(props)	
	{
	return(
		<div>
		{props.name} and  {props.amount || 0}

		</div>


		)
}

export default Resource;



*/
//besides the import/export and seprate files - code is the same. it works in here, does not work locally on my machine.

const gameData = {
  clickerData: [{
    name: "grey",
    subjectsOfIncrease: ["grey"],
    isUnlocked: true,
    value: 1
  }],
  resourceData: [{
    name: "grey",
    resouceMax: 100,
    isUnlocked: true,
    changePerTick: 0,
    counterTillStopped: 100,
    amount: 0
  }]
}
class App extends React.Component {
    constructor() {
      super();
      this.state = {
        resources: gameData.resourceData,
        clickers: gameData.clickerData
      };
      this.gainResource = this.gainResource.bind(this);
    }
    gainResource(event) {
      console.count("gain button");
      const name = event.target.name;
      this.setState((prevState) => {
        const newResources = prevState.resources.map(resource => {
          if (resource.name === name) {
            resource.amount = Number(resource.amount) + 1 //Number(prevState.clickers.find(x=>x.name===name).value)
          }
          return resource;
        });
        console.log(prevState.resources.find(item => item.name === name).amount, "old");
        console.log(newResources.find(item => item.name === name).amount, "new");
        return {
          resources: newResources
        }
      });
    }
    render() {
      const resources = this.state.resources.map(resourceData => {
          return (
            <Resource 
              name = {resourceData.name}
              resouceMax = {resourceData.resourceMax}
              isUnlocked = {resourceData.isUnlocked}
              changePerTick = {resourceData.changePerTick}
              counterTillStopped = {resourceData.countTillStopped}
              amount = {resourceData.amount}
              key = {resourceData.name}
            />
          )
      })

      const clickers = this.state.clickers.map(clickerData => {
          return ( 
            <Clicker 
              name = {clickerData.name}
              HandleClick = {this.gainResource}
              value = {clickerData.amount}
              key = {clickerData.name}
            />
          )
    })

    return (
          <div className = "App" > 
            {resources} 
           {clickers} 
          </div>
   )
 }
}
function Resource(props) {
      return  <div >  {props.name} and {props.amount || 0} </div>
}

function Clicker(props) {
      return ( 
        <div > {props.name} 
          <button name = {props.name}  onClick = {props.HandleClick}>
            {props.name} {props.value}
          </button> 
        </div>
     )
}
const root = document.getElementById('root');
ReactDOM.render(  <App / >,root );

<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 id="root"></div>

因此，我正在构建一个clicker游戏来学习react，我不明白为什么这段代码会以这种方式运行：

在主应用程序中，我有以下功能：

  gainResource(event)
    {
    console.count("gain button");
    const name = event.target.name;
    this.setState( (prevState)=>
      {
      const newResources =  prevState.resources.map(resource=>
        {
        if(resource.name === name)  
          {
          resource.amount = Number(resource.amount) + 1 //Number(prevState.clickers.find(x=>x.name===name).value)
        }  
        return resource;
      });
      console.log(prevState.resources.find(item=>item.name===name).amount, "old");
      console.log(newResources.find(item=>item.name===name).amount, "new");
      return {resources: newResources}
    });
  }

那个控制台。计数只运行一次。。。但我有两对“新老”的。好像setState在此函数中运行了两次，而该函数只运行一次？

控制台。输出为：

App.js:64 gain button: 1
App.js:76 1 "old"
App.js:77 1 "new"
App.js:76 2 "old"
App.js:77 2 "new"

所以看起来函数运行了一次。但是设置的状态正在运行两次？

症状是它的数量增加了2。但正如gamedata中所示，amount的初始状态也是0，而不是1。json

    resourceData:
        [
            {   
            name:"grey",
            resouceMax:100,
            isUnlocked:true,
            changePerTick:0,
            counterTillStopped:100,
            amount:0
            },{etc},{},{}],
        clickerData:
        [
            {
            name:"grey",
            subjectsOfIncrease:["grey"],
            isUnlocked:true,
            value:1
           },{etc},{},{}]

我不认为我将要讲的其余代码与此行为最相关，但我还不知道如何反应，因此我不知道我遗漏了什么：但这就是我生成clicker按钮的方式：

const clickers = this.state.clickers.map(clickerData=>
      {
      return(
        <Clicker
          name={clickerData.name}  
          HandleClick = {this.gainResource}
          value = {clickerData.amount}
          key={clickerData.name}

        />

        )
    })

在响片里。js功能组件我只是返回以下内容：

        <div>
        {props.name}
        <button name={props.name} onClick={props.HandleClick}>
                {props.name} {props.value}
        </button>
        </div>

函数在构造函数中绑定到此...我不明白为什么在一个调用一次的函数中运行setState两次。

我也尝试过：

        <div>
        {props.name}
        <button name={props.name} onClick={()=>props.HandleClick}> //anon function results in no output
                {props.name} {props.value}
        </button>
        </div>

Answer 1

只要你没有给我们提供一个可运行的例子，我对会发生什么有一个疑问，让我们看看它是否有效。

我可以在gainResources函数中看到，特别是在这一行resource.amount=数字（resource.amount）1中，您试图在不使用setState的情况下更新状态，这是React文档不推荐的

请先尝试分配常量myRessource=ressource，然后返回myRessource。

  gainResource(event)
    {
    console.count("gain button");
    const name = event.target.name;
    this.setState( (prevState)=>
      {
      const newResources =  prevState.resources.map(resource=>
        {
       const myRessource = ressource;
        if(myRessource.name === name)  
          {
          myRessource.amount = Number(myRessource.amount) + 1 //Number(prevState.clickers.find(x=>x.name===name).value)
        }  
        return myRessource;
      });
      console.log(prevState.resources.find(item=>item.name===name).amount, "old");
      console.log(newResources.find(item=>item.name===name).amount, "new");
      return {resources: newResources}
    });
  }

Answer 2

这是一个setState（回调）方法的预期行为

回调执行两次，以确保它不会直接改变状态。

根据：https://github.com/facebook/react/issues/12856#issuecomment-390206425

在代码段中，您创建了一个新数组，但其中的对象仍然相同：

const newResources = lastResources.map(resource => {
  if(resource.name === name){
    resource.amount = Number(resource.amount) + 1 
  }  
  return resource;
}

必须分别复制每个对象：

const newResources = lastResources.map(resource => {
  const newObject = Object.assign({}, resource)
  if(resource.name === name){
    newObject.amount = Number(newObject.amount) + 1 
  }  
  return newObject;
}

Answer 3

最佳答案：

我正在使用CreateReact应用程序。我的应用程序组件被包装在严格模式下。。。它两次发射了setState。。。这很好地解释了为什么这在代码剪贴上是不可复制的，为什么函数被调用了一次，而setState被调用了两次。

删除严格模式完全修复了该问题。