Question

但是直到在componentDidMount中进行ajax调用后，元素才会被填充

似乎渲染发生在ajax调用返回某些内容之前，因此该按钮从未被禁用。如何确定按钮已正确禁用？

代码：

<button className="someclass" onClick={this.handleClick} disabled={this.state.apps.length < 5}>some text</button>}

和componentDidMount中的

：

componentDidMount() {
    fetch("some_url", {
        method: 'post',
        body: JSON.stringify({"user": "some email"}),
        headers: {'Content-Type': ' application/json'}
    })
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({apps: JSON.parse(result)});
        },
        (error) => {
            console.log("error", error);
        }
        );
}

进行调用并返回元素apps并没有问题，但是时间安排使禁用没有发生

编辑：我的逻辑是错误的。...应该检查>=而不是< .......我很愚蠢.......

Answer 1

您必须在构造函数中初始化应用

async componentDidMount(){
  const RESTAPI = new API();
  const information = await RESTAPI.api_call();
  console.log(information)
}

Answer 2

再看一遍，问题可能与解析数组有关。你为什么解析它？它不适用于阵列。只需以常规方式设置状态即可：

this.setState({apps: result});

class App extends React.Component {
  state = {
    apps: [],
  }

  componentDidMount() {
    fetch( "https://jsonplaceholder.typicode.com/posts" )
      .then( res => res.json() )
      .then( apps => {
        this.setState({ apps })
      })
  }
  render() {
    return (
      <div>
        <button
          onClick={this.handleClick}
          disabled={this.state.apps.length >= 5}
        >some text</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

reactjs-当元素的长度在this.state中达到限制时禁用按钮

2 个答案: