开发者问题收集

ReactJS:无法读取未定义的属性“值”

2019-04-03
298

我正在尝试使用 React 的子级与父级通信,我传递了三个具有唯一 ID 的按钮,我想在单击增量按钮后简单地显示值。第一次单击时,每个按钮都会正常递增,但是,第二次单击任何按钮后,它会给出

Cannot read property 'value' of undefined

。我不确定第一次点击后会发生什么。

    let data = [
      {id: 1, value: 85},
      {id: 2, value: 0},
      {id: 3, value: 0}
    ]

    class Counter extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          counter: 1,
          data: this.props.data
        }
      }


      componentWillReceiveProps(nextProps) {
        if(nextProps !== this.state.data) {
          this.setState({data: nextProps})
        }
      }

       handleClick(id) {
        this.props.increment(id, 
          this.state.data[id-1].value = this.state.data[id-1].value + 
          this.state.counter);
      }

      render() {
        return (
           <div>
              {data.map(data => {
                return (
                  <div key={data.id}>
                    {data.value}
                    <button onClick={() => this.handleClick(data.id)}>+</button>
                  </div>
                )
              })}
           </div>
        )
      }

    }


    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          data
        }
      }

      onIncrement(id, newValue) {
        this.setState((state) => ({
          data: state.data[id-1].value = newValue
        }))
      }

      render() {
        return (
          <div>
           <Counter data={this.state.data} increment={this.onIncrement.bind(this)}/>
          </div>
        )
      }
    }

    ReactDOM.render(
      <App />,
      document.querySelector("#root")
    )
3个回答

在这句话中:

this.props.increment(id, 
      this.state.data[id-1].value = this.state.data[id-1].value + 
      this.state.counter);

您正在执行 id-1 ,我认为您不需要它,只需要 [id] 。 如果您单击 id 为 1 的按钮,则您正在尝试增加 1 - 1 的值,并且您没有任何 id 0 的数据>

Cespejo
2019-04-03

您的代码中存在问题的是此行

this.state.data[id-1].value = this.state.data[id-1].value + this.state.counter);

您到底想在这里做什么?因为您有 3 个索引 0,1,2,并且您超出了索引范围,因此它是未定义的,并且您收到错误,请在此处提及您的要求。

您的代码以无用的方式使用状态,我只是以一种好的方式优化了您的代码。 提示: 不要在不需要的地方使用全状态组件,请使用功能组件。它工作正常并根据您的需要提供服务。

    const Counter = (props) => {
    return (
        <div>
            {props.data.map(d => {
                return (
                    <div key={d.id}>
                        {d.value}
                        <button onClick={() => props.increment(d.id, (d.value + 1))}>+</button>
                    </div>
                )
            })}
        </div>
    )
}
class App extends React.Component {

    state = {
        data: [
            { id: 1, value: 85 },
            { id: 2, value: 0 },
            { id: 3, value: 0 }
        ]
    }
    onIncrement = (id, newValue) => {
        debugger
        var newdata = [...this.state.data];
        var d = { ...newdata[id - 1] };
        d.value = newValue;
        newdata[id - 1] = d;
        this.setState({ data: newdata })
    }

    render() {
        return (
            <div>
                <Counter data={this.state.data} increment={this.onIncrement} />
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector("#root")
)
Muhammad Asad
2019-04-03
import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1,
      data: this.props.data
    };
  }

  handleClick(id, index) {
    this.props.increment(
      id,
      (this.props.data[id - 1].value =
        this.props.data[id - 1].value + this.state.counter), index
    );
  }

  render() {
    return (
      <div>
        {this.props.data.map((data
         , index) => {
          return (
            <div key={data.id}>
              {data.value}
              <button onClick={() => this.handleClick(data.id, index)}>+</button>
            </div>
          );
        })}
      </div>
    );
  }
}

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [{ id: 1, value: 85 }, { id: 2, value: 0 }, { id: 3, value: 0 }]
    };
  }

  onIncrement(id, newValue, index) {
    let {data} = this.state;
  data[index].value = newValue;
    this.setState({
      data
    });
  }

  render() {
    console.log(this.state.data)
    return (
      <div>
        <Counter
          data={this.state.data}
          increment={this.onIncrement.bind(this)}
        />
      </div>
    );
  }
}

请看一下,您是否以错误的方式进行状态更新

RK_oo7
2019-04-03