Question

state = { 
  persons:[
    {id:"cbhc", name:"surya",age:26,sex:"male"},
    {id:"rgt", name:"sachin",age:36,sex:"male"},
    {id:"cbcchc", name:"rahul",age:46,sex:"male"}
  ],
  showdetails:false,
  **counter:0**,

};

上面是我的应用程序中的数据状态：

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

要解决此问题，请使用setState()的第二种形式，该形式接受函数而不是对象。该函数将先前的状态作为第一个参数，而将更新时的props作为第二个参数：

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

这里到底是什么：props.increment ????

我的一段代码：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

我想知道什么是props.increment？

我组件的骨架：

import React from "react";
//import mystyles from "./person.module.css";
//import Studentoutput from "./cockpit/cockpit";
const Singlestudent = props => {
  console.log("child component skeleton rendering...");
  return (
    <div>
      <p onClick={props.click}>{props.name}</p>
      <p>{props.age}</p>
      <p>{props.id}</p>
      **<p>{props.increment}</p>**
      <input type="text" onChange={props.update} value={props.name} />
    </div>
  );
};

export default Singlestudent;

由于我的状态数据是通过嵌套数组和对象嵌入的，因此使用map方法来构造我的骨架comp数据，如下所示：

// import React from "react";
// //import mystyles from "./person.module.css";
// const Studentoutput = props => <input type="text" value={props.name} />;

// export default Studentoutput;
import React from "react";

import Singlestudent from "./student/singlestudent";
const Studentinfo = props => {
  console.log("child component details rendering...");
  return props.details.map((studentinfo, index) => {
    return (
      <Singlestudent
        key={studentinfo.id}
        name={studentinfo.name}
        age={studentinfo.age}
        **increment={props.increment}**
        update={props.updated(studentinfo.id)}
        click={props.clicked(studentinfo.id)}

      />
    );
  });
};

export default Studentinfo;

我通过了增量= {1}，对其进行了硬编码。

现在终于将以上内容传递给在浏览器中呈现的主父

return (
      <div className={mystyles.parent}>
        <Studentinfo
          details={this.state.details}
          updated={this.updateStudentHandler}
          clicked={this.deleteStudentHandler}
          **increment={1}**
        />
     </div>
    );

从上述代码段中，我正在通过 updateStudentHandler

更改计数器值

 updateStudentHandler = id => event => {
    //debugger;
    const studentIndex = this.state.details.findIndex(d => d.id === id);
    console.log(studentIndex);
    let duplicate = {
      ...this.state.details[studentIndex]
    };
    duplicate.name = event.target.value;
    const dd = [...this.state.details];
    dd[studentIndex] = duplicate;
    this.setState({
      details: dd
    });
    this.setState((referencetoprevState, Props) => {
      return {
        counter: referencetoprevState.counter + Props.increment
      };
    });
  };

我在输入框中更改文本后，计数器应立即更新，但返回NaN，为什么？??? 请参阅下面的屏幕截图

output of counter variable

但是如果我更改以下代码

this.setState((state, props) => {
      return { counter: state.counter + props.increment };
});

使用值（9000）而不是 props.increment 来导致按预期更新计数器值。

this.setState((state, props) => {
      return { counter: state.counter + 9000 };
});

为什么我需要提供显式的值，而不仅仅是像 state.counter 那样的 props.increment ，因为state.counter将其值从先前状态取为0，但props.increment不能从用户定义组件的jsx（ Studentinfo comp）的增量= {1}中取值1。任何限制/原因??

Answer 1

React文档指出：

当React看到一个代表用户定义组件的元素时，它将JSX属性作为单个对象传递给该组件。我们称这个对象为“道具”。

我建议进一步阅读官方文档，尤其是Rendering a Component部分。

另外setState()个here进一步说明：

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

保证更新器功能接收到的状态和道具都是最新的。更新器的输出与state进行浅层合并。

摘要：

基本上，您在代码中使用setState()函数的updater参数，该参数带有两个参数state和props：

state：是在应用更改（即先前的状态）时，对组件状态的引用（如上所述）。
props：组件的当前属性。

您可以想到在两个不同的参数中具有组件的先前状态和当前属性。

我希望这会有所帮助！

Answer 2

是的，就像在状态内部为对象设置值一样，我们在jsx的element标签中为props提供值，因此从我上面的代码中我发现了几件事。

根据我的理解，我相信setState的updater函数具有两个参数，基本上按顺序排列，因为第一个参数是先前状态，第二个是组件的当前属性。这是我在页面上与所有其他子组件一起呈现的主要组件。因此，props.increment来自 Appl ，该组件扩展了组件的“反应”范围。

从我的骨骼和骨骼主体中删除增量道具，即从 Singlestudent 和 Studentinfo 组合中

所以终于：

 this.setState((referencetoprevState, Props) => {
      return {
        counter: referencetoprevState.counter + Props.increment
      };
    });

将是：

 this.setState((referencetoprevState, Props) => {
      return {
        counter: referencetoprevState.counter + 1
      };
    });

状态更新可能是异步的，this.props到底是什么？

2 个答案: