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

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() 的第二种形式，它接受函数而不是对象。该函数将接收先前的状态作为第一个参数，并将应用更新时的道具作为第二个参数：

// 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 方法来构造我的骨架组合数据，如下所示：

// 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;

我通过了 increment={1} ，硬编码它。

现在终于将上面的内容传递给在浏览器上呈现的我的主要父级

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

从上面的代码 sn-p 我通过 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 };
});

为什么我需要明确提供值，而不仅仅是像 props.increment 类似于 state.counter 因为 state.counter 将其值从前一个状态设为 0 但是props.increment 没有从 Studentinfo comp 的用户定义组件的 jsx 中的 increment={1} 中取值 1？ 有什么限制/原因吗？？

Answer 1

正如 React 文档所述：

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

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

另外setState() 一个here 进一步解释：

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

updater 函数接收到的 state 和 props 都保证是最新的。更新器的输出与状态浅合并。

总结：

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

1. state: 是对组件状态的引用 - 上面提到 - 在应用更改时，也就是以前的状态。
2. props：组件的当前属性。

您可以认为将组件的先前状态和当前属性放在两个不同的参数中。

我希望这会有所帮助！

Answer 2

是的，我明白了，就像为状态内的对象设置值一样，我们在元素标签中为道具提供值，即 jsx，所以从上面的代码中我发现了一些东西。

据我了解，我认为 setState 的更新程序函数有两个参数，它们基本上按顺序排列，因为第一个参数是先前的状态，第二个是组件的当前属性。 在这里，与所有其他子组件一起呈现在页面上的主要组件是 . 所以，props.increment 来自 Appl，它从“react”扩展了 Component。

从我的骨架和骨架中删除增量道具，即从 Singlestudent 和 Studentinfo comps

终于：

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

应该是：

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