Javascript 在使用两个组件文件时，React无法按预期工作

我正在学习react的教程，我需要一些帮助。 在我的完整代码中有2个文件.jsx。教程中的人很伤心，如果我们必须在这个州增加我们的价值，最好有一个真相。 所以我将文件中的增量代码移到了原始状态，但是我不能真正地增加值。 这是我的第一个文件的代码：

从“React”导入React，{Component}； 类计数器扩展组件{ 渲染{ 回来 {this.formatCount} this.props.onIcrementthis.props}className=btn btn secondary btn sm>Increment this.props.onDeletethis.props.id}className=btn btn danger btn sm-2>删除 ; } GetBadgeClass{ let classes=徽章m-2徽章-； classes+=this.props.value==0？警告：主要； 返回类； } 格式化计数{ 常量值=this.props.value； 返回值===0？零：值； } } 导出默认计数器； 这是我的第二个文件的代码，该文件的状态为：

import React, { Component} from 'react';
import Counter from './counter.jsx'

class Counters extends Component {
    state = {
        counters: [
            { id: 1, value: 4},
            { id: 2, value: 0},
            { id: 3, value: 0},
            { id: 4, value: 0}
        ]
    };

    handleIncrement = (counter) => {
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = {...counters[index]};
        counters[index].value++;
        this.setState({ counters });
    }

    handleReset = () => {
    }

    handleDelete = (counterId) => {
        const counters = this.state.counters.filter(c => c.id !== counterId);
        this.setState({ counters });
    }

    render() {
        return (
            <div>
                <button onClick={this.handleReset} className="btn btn-primary btn-sm m-2">Reset</button>
                {this.state.counters.map(counter => <Counter key={counter.id} onIcrement={this.handleIncrement} onDelete={this.handleDelete} id={counter.id}  value={counter.value}/>)}
            </div>
        );
    }
}

export default Counters;

代码中没有错误，只是增量的这个问题没有正常工作。

---

您能帮助我吗？

您的代码中有一些错误，我对您的组件做了一些结构化处理，但我强烈建议您寻找一些入门教程

除了调用setState之外，不应该改变状态变量

您应该根据需要使用构造函数、componentDidUpdate、componentDidMount

阅读这篇文章，获得更好的感觉

import React, { Component} from 'react';
import Counter from './counter.jsx'

class Counters extends Component {
    constructor(props){
       this.state = {
        counters: [
            { id: 1, value: 4},
            { id: 2, value: 0},
            { id: 3, value: 0},
            { id: 4, value: 0}
        ]
    };

    }


    const handleIncrement = (counter) => {
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = {...counters[index]};
        counters[index].value++;
        this.setState({ counters });
    }

    const handleReset = () => {
    }

    const handleDelete = (counterId) => {
        const countersCopy = [...this.state.counters]
        countersCopy .filter(c => c.id !== counterId);
        this.setState({ counters: countersCopy });
    }

    render() {
        return (
            <div>
                <button onClick={this.handleReset} className="btn btn-primary btn-sm m-2">Reset</button>
                {this.state.counters.map(counter => <Counter key={counter.id} onIcrement={this.handleIncrement} onDelete={this.handleDelete} id={counter.id}  value={counter.value}/>)}
            </div>
        );
    }
}

export default Counters;

---

您的代码中有一些错误，我对您的组件进行了一些结构化处理，但我强烈建议您寻找一些入门教程

除了调用setState之外，不应该改变状态变量

您应该根据需要使用构造函数、componentDidUpdate、componentDidMount

阅读这篇文章，获得更好的感觉

import React, { Component} from 'react';
import Counter from './counter.jsx'

class Counters extends Component {
    constructor(props){
       this.state = {
        counters: [
            { id: 1, value: 4},
            { id: 2, value: 0},
            { id: 3, value: 0},
            { id: 4, value: 0}
        ]
    };

    }


    const handleIncrement = (counter) => {
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = {...counters[index]};
        counters[index].value++;
        this.setState({ counters });
    }

    const handleReset = () => {
    }

    const handleDelete = (counterId) => {
        const countersCopy = [...this.state.counters]
        countersCopy .filter(c => c.id !== counterId);
        this.setState({ counters: countersCopy });
    }

    render() {
        return (
            <div>
                <button onClick={this.handleReset} className="btn btn-primary btn-sm m-2">Reset</button>
                {this.state.counters.map(counter => <Counter key={counter.id} onIcrement={this.handleIncrement} onDelete={this.handleDelete} id={counter.id}  value={counter.value}/>)}
            </div>
        );
    }
}

export default Counters;

---

您的代码已经完成了一半，所以请支持您

这里的问题在于handleIncrement函数以及从计数器组件传递给它的参数

当用户单击“增量”按钮时，您将传递以下消息：

<button
  onClick={() => this.props.onIcrement(this.props)}
  className="btn btn-secondary btn-sm">
Increment
</button>

在handleIncrement函数中，您只需要找到该计数器ID的索引。为此，您可以使用JavaScript数组函数findIndex：

const index=counters.findIndexcounter=>counter.id==counterId

最后，handleIncrement函数如下所示：

import React, { useState} from 'react';
import Counter from './counter.jsx'

const init = {
  counters: [
            { id: 1, value: 4},
            { id: 2, value: 0},
            { id: 3, value: 0},
            { id: 4, value: 0}
        ]
}

const Counters = () => {
  const [state, setState] = useState(init);

  const handleIncrement = (counterId) => {
    const counters = [...state.counters];
    const index = counters.findIndex((counter) => counter.id === counterId);
    counters[index] = { ...counters[index] };
    counters[index].value++;
    setState({ counters });
  }

  const handleReset = () => {
  }

  const handleDelete = (counterId) => {
      const counterDup = [...state.counters.filter(c => c.id !== counterId)];
      setState({ counters: counterDup });
  }

    return (
        <div>
            <button onClick={handleReset} className="btn btn-primary btn-sm m-2">Reset</button>
            {state.counters.map(counter => <Counter key={counter.id} onIcrement={handleIncrement} onDelete={handleDelete} id={counter.id}  value={counter.value}/>)}
        </div>
    );
}

export default Counters;

handleIncrement=计数器ID=>{ 常量计数器=[…this.state.counters]； const index=counters.findIndexcounter=>counter.id==counterId； 计数器[索引]={…计数器[索引]}； 计数器[索引]。值++； 这个.setState{counters}； };

---

您的代码已经完成了一半，所以请支持您

这里的问题在于handleIncrement函数以及从计数器组件传递给它的参数

当用户单击“增量”按钮时，您将传递以下消息：

<button
  onClick={() => this.props.onIcrement(this.props)}
  className="btn btn-secondary btn-sm">
Increment
</button>

在handleIncrement函数中，您只需要找到该计数器ID的索引。为此，您可以使用JavaScript数组函数findIndex：

const index=counters.findIndexcounter=>counter.id==counterId

最后，handleIncrement函数如下所示：

import React, { useState} from 'react';
import Counter from './counter.jsx'

const init = {
  counters: [
            { id: 1, value: 4},
            { id: 2, value: 0},
            { id: 3, value: 0},
            { id: 4, value: 0}
        ]
}

const Counters = () => {
  const [state, setState] = useState(init);

  const handleIncrement = (counterId) => {
    const counters = [...state.counters];
    const index = counters.findIndex((counter) => counter.id === counterId);
    counters[index] = { ...counters[index] };
    counters[index].value++;
    setState({ counters });
  }

  const handleReset = () => {
  }

  const handleDelete = (counterId) => {
      const counterDup = [...state.counters.filter(c => c.id !== counterId)];
      setState({ counters: counterDup });
  }

    return (
        <div>
            <button onClick={handleReset} className="btn btn-primary btn-sm m-2">Reset</button>
            {state.counters.map(counter => <Counter key={counter.id} onIcrement={handleIncrement} onDelete={handleDelete} id={counter.id}  value={counter.value}/>)}
        </div>
    );
}

export default Counters;

handleIncrement=计数器ID=>{ 常量计数器=[…this.state.counters]； const index=counters.findIndexcounter=>counter.id==counterId； 计数器[索引]={…计数器[索引]}； 计数器[索引]。值++； 这个.setState{counters}； };

---

干得好Patten Ferreira老人说得很对

但是，您可能需要考虑函数组件而不是类组件。 类组件现在可以通过带有挂钩的功能组件实现的所有功能

因此，您可以按如下方式使用Counter.jsx：

import React from "react";

const Counter = ({ onIcrement, onDelete, id, value }) => {
  function getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += value === 0 ? "warning" : "primary";
    return classes;
  }

  function formatCount() {
    return value === 0 ? "Zero" : value;
  }

  return (
    <div>
      <span className={getBadgeClasses()}>{formatCount()}</span>
      <button
        onClick={() => onIcrement(id)}
        className="btn btn-secondary btn-sm"
      >
        Increment
      </button>
      <button
        onClick={() => onDelete(id)}
        className="btn btn-danger btn-sm m-2"
      >
        Delete
      </button>
    </div>
  );
};

export default Counter;

而且一切都应该很好

您还可以查看下面的codesandbox参考

---

祝你好运

干得好Patten Ferreira老人说得很对

但是，您可能需要考虑函数组件而不是类组件。 类组件现在可以通过带有挂钩的功能组件实现的所有功能

因此，您可以按如下方式使用Counter.jsx：

import React from "react";

const Counter = ({ onIcrement, onDelete, id, value }) => {
  function getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += value === 0 ? "warning" : "primary";
    return classes;
  }

  function formatCount() {
    return value === 0 ? "Zero" : value;
  }

  return (
    <div>
      <span className={getBadgeClasses()}>{formatCount()}</span>
      <button
        onClick={() => onIcrement(id)}
        className="btn btn-secondary btn-sm"
      >
        Increment
      </button>
      <button
        onClick={() => onDelete(id)}
        className="btn btn-danger btn-sm m-2"
      >
        Delete
      </button>
    </div>
  );
};

export default Counter;

而且一切都应该很好

您还可以查看下面的codesandbox参考

---

祝你好运

他的手镯看起来不错。过滤器已经返回了一个新的数组，它不会改变它。非常感谢你的帮助@buzatto是的，这方面我不好。过滤器实际上创建了一个新数组。第二步，确保你将对你帮助最大的答案标记为被接受的答案，无论是谁。Happy Codinghs Handledelette看起来不错。过滤器已经返回了一个新的数组，它不会改变它。非常感谢你的帮助@buzatto是的，这方面我不好。过滤器实际上创建了一个新数组。还要确保

---

你把对你帮助最大的答案标记为被接受的答案，不管是谁。Happy coding它不起作用的原因是因为你的onIncrement函数是this.handleIncrement，但是你用onIcrementthis.props调用它，但是它期望的参数是计数器本身。为什么不让handleIncrement函数使用id而不是计数器，然后就可以像使用onDelete一样使用.props.onIcrementthis.props.id？它不起作用的原因是因为你的onIncrement函数是this.handleIncrement，但你用onIcrementthis.props调用它，但它期待的论点是计数器本身。为什么不让handleIncrement函数使用id而不是计数器，然后就可以像使用onDelete一样执行此操作。props.oniclementthis.props.id？非常感谢您的帮助！！！非常感谢你的帮助！！！非常感谢你的帮助！！！非常感谢你的帮助！！！