小编Hem*_*ari的帖子

我目前正在学习React中的钩子概念,并试图理解下面的例子.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

上面的示例在处理程序函数参数本身上递增计数器.如果我想修改事件处理函数内的计数值怎么办？

考虑下面的例子

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. …

考虑下面的钩子示例

   import { useState } from 'react';

   function Example() {
       const [count, setCount] = useState(0);

       return (
           <div>
               <p>You clicked {count} times</p>
               <button onClick={() => setCount(count + 1)}>
                  Click me
               </button>
          </div>
        );
     }

基本上，我们使用this.forceUpdate（）方法强制组件在React类组件中立即重新呈现，如下例所示

    class Test extends Component{
        constructor(props){
             super(props);
             this.state = {
                 count:0,
                 count2: 100
             }
             this.setCount = this.setCount.bind(this);//how can I do this with hooks in functional component 
        }
        setCount(){
              let count = this.state.count;
                   count = count+1;
              let count2 = this.state.count2;
                   count2 = count2+1;
              this.setState({count});
              this.forceUpdate();
              //before below …

基本上我们componentDidMount()在React类组件中的生命周期方法中进行API调用,如下所示

     componentDidMount(){
          //Here we do API call and do setState accordingly
     }

但是在React v16.7.0中引入了钩子之后,就没有更多的类组件了.

我的查询是,我们究竟需要在带有钩子的功能组件中进行API调用？

我们有类似的方法componentDidMount()吗？

我有一个包含对象的数组.我正在创建此数组的映射以使用span组件呈现名称.

let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];

我一直在使用以下两个不同的功能来迭代该对象数组,并使用map来呈现JSX元素.

Functionality1:

import React, { Component } from 'react';
class App extends Component {

  render() {
    let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];
    const items = data.map((key, i) => {
      return <span key={key.id}>{key.name}</span>;
    });
    return (
      <div>
        {items}
      </div>
    );
  }
}

export default App;

Functionality2:

import React, { Component } from 'react';
class App extends Component {

  render() {
    let data …

我已经安装了webpack

npm install -g webpack

和

npm install webpack 

我还安装了webpack-dev-server

npm install -g webpack-dev-server

完成安装后,我运行了命令webpack但是,它显示以下错误

webpack:找不到命令

我没有得到什么是错误.

我已经通过了React v16.7.0中引入的钩子。

https://reactjs.org/docs/hooks-intro.html

因此，我对钩子的理解是，我们可以在功能组件中使用状态，而无需在react中编写类组件。这真是一个了不起的功能。

但是我对在功能组件中使用钩子一无所知。

   import { useState } from 'react';

   function Example() {
   const [count, setCount] = useState(0);

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
   );
  }

如果使用钩子，如何在上述功能组件中使用生命周期方法？

我已经做了一年多的反应.我主要使用.map,.forEach,.filter或使用Object.keys和Object.values迭代一个数组(如果它是一个对象).

但是为jsx元素添加唯一键的不同方法有哪些.以下是我到目前为止所习惯的

使用数据中的唯一ID作为关键道具的关键:

const data= [{"id": "01", "name": "abc"}, {"id": "02", "name": "xyz"}];

render(){
  const items = data.map(item => {
    return <span key={item.id}>{item.name}</span>;
  }
  return(
     <div>
        {items}
     </div>
  )
}

使用索引作为关键道具的关键:

const data= [{"id": "01", "name": "abc"}, {"id": "02", "name": "xyz"}];

render(){
  const items = data.map((item, i) => {
    let keyValue = i+1;
    return <span key={keyValue}>{item.name}</span>;
  }
  return(
     <div>
        {items}
     </div>
  )
}

除了我上面提到的以及最有效和推荐的方法之外,还有其他方法可以为jsx元素添加唯一键吗？

基本上在类组件中，我们在构造函数中预先初始化状态，初始值如下所示。

     constructor(props){
          super(props);
          this.state = {
                 count: 0
          }
     }

但是在引入钩子之后，所有的类组件都变成了带有状态的功能组件。

但我的问题是如何使用 React v16.7.0 中的钩子将计数状态预初始化为 0

基本上我们在构造函数中绑定事件处理函数,或者将它们作为React类组件中的箭头函数,如下所示

class Test extends Component{
  constructor(props){
    super(props);
    this.state = { count:0 };
    this.setCount = this.setCount.bind(this);
  }

  setCount() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return <button onClick={this.setCount}>Increase</button>
  }
}

但是在React v16.7.0中引入了钩子后,类组件成为具有状态的功能组件.

那么如何将函数与函数组件中的钩子绑定？

我有一个名为 test 的现有表，其中有两列 id 并已使用

这里使用的包含我的表中的三个值 null、false 和 true。这里null是默认使用的

我想更新使用 false 的行，其中使用的是 null，所以我在 Postgres 中尝试了下面的查询，但它对我不起作用。

  update test set utilized=false where utilized=null;\n