Question

在React中，我有一个叫做random的状态属性，带有一个随机值。我正在尝试选择具有随机状态的myArray2值，并将其传递到myArray状态内。

当我单击按钮时，警报方法应显示随机数之一，但似乎不起作用。

import React, { Component } from 'react';
import './App.css';



class App extends Component {

  //random = Math.floor(Math.random() * 3)

  constructor(props){
    super(props);

this.state = {
    random: Math.floor(Math.random() * 3),
    myArray2:['one','two','three'],
    myArray:this.state.myArray2[this.state.random]     
};

}

change = () => {
  alert(this.state.myArray);
}

  render() {
    return (
      <div className="App">
        <button onClick={this.change}>ok</button>
      </div> 

    );
  }


}

export default App;

这就是我得到的东西

TypeError：无法读取未定义的属性'myArray2'

这就是我想要的-

显示随机数的警报方法

Answer 1

这是您当前无法使用基于类的组件执行的操作。但是，您可以只让change()函数自己执行随机逻辑并有效地更新random和myArray状态。

this.setState()具有用于回调的第二个参数，该参数使我们可以访问更新后的状态。用它来触发警报。

this.state = {
    random: Math.floor(Math.random() * 3),
    myArray2:['one','two','three'],
    myArray: null
};


  change = () => {
    const random = Math.floor(Math.random() * 3);
    this.setState(
      {
        random: random,
        myArray: this.state.myArray2[random]
      },
      () => alert(this.state.myArray) //now refers to the new state value
    );
  };

请参阅沙箱以供参考：https://codesandbox.io/s/confident-meadow-jumty

Answer 2

您的错误是在state内部调用state并尝试在没有setState的情况下更改state属性的值。我想你应该要

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  state = {
    myArray2: ["one", "two", "three"],
    myArray: []
  };

  change = () => {
    let random = Math.floor(Math.random() * 3);
    this.setState({ myArray: this.state.myArray2[random] });
    alert(this.state.myArray);
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.change}>ok</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

React无法将状态值传递给状态数组

2 个答案: