Question

有一个选择从API获取ID，然后我有一个显示数据的表。

如果我定义一个像示例这样的状态this.state = {value：23}; 该表显示http://.../23

中没有问题的数据

我想要实现的是更改选择后表格会更新。我可以通过console.log获取所选值（event.target.value）;但是我试图将这个值传递给：

＆LT;表值= {this.state.value} /＆gt;

并重新渲染表格！任何帮助表示赞赏！

class Planet extends React.Component {
constructor(props) {
    super(props);
    this.state = {value: 23};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event){
    this.setState({value: event.target.value});
    console.log(event.target.value);
}

handleSubmit(event){
    this.setState({value: this.state.value});
    //event.preventDefault();
}

render () {
    let planets = this.props.state.planets;
    let optionItems = planets.map((planet) =>
            <option key={planet.id}>{planet.id}</option>
        );

    return (
        <div>
        <form onSubmit={this.handleSubmit}>
         <select value={this.state.value} onChange={this.handleChange} className="dropbox" >
            {optionItems}
         </select>
         <input type="submit" value="Submit" />
         </form >
         <Table value={this.state.value} />
         </div>
    )
}

export default class Table extends React.Component {

  constructor(props){
    super(props);
    this.state = {}
  }


  fetchData() {
  const url = 'http://localhost:8000/sprints/';
  const value = this.props.value;
  var string = url+value;
  fetch(string)
  .then(function(response) {
    return response.json();
  })
  .then((myJson) => this.setState(myJson));
}

  componentDidMount(){
    this.fetchData();
  }

render() {
    return this.state.sprints ? (
      <div>
        <ResponseTable data={this.state.sprints} />
      </div>
    ) : (
      <div>
         Loading ...
      </div>
    );
  }
}

Answer 1

您必须在componentWillReceiveProps(props)类中使用Table，每次更新父组件中的状态时都会调用它。在该方法中，您可以再次调用fetch方法

https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

Answer 2

实际上，您在传递props方面没有任何问题。在更新组件后，您应该使用componentDidUpdate生命周期钩子发出其他请求，但不要忘记检查值是否已更改。

像这样：

表格组件

componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
        this.fetchData()
    }
}

从选择值ReactJS更新组件

2 个答案: