Reactjs 如何在React中获取更新的数据

如何通过调用ajax将从另一个页面接收的新数据来获取react的更新数据

如何将新数据替换为“结果”div

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
}  
$.ajax({
url:“/test.bc”，
键入：“获取”，
成功：（结果）=>{
this.setState（{data:eval（result）}）；
}
})
$（文档）.on（'update_result'，（事件，startairline，类名，stops）=>{
$.ajax({
url:“/new.bc”，
类型：“post”，
数据：{
startairline:startairline，
停止：停止，
classname:classname，
},
成功：（结果）=>{
console.log（结果）
this.setState（{hasBeenChanged:true，data:eval（result）}）
},
})
});
}
renderFlight（）{
返回this.state.data.map（（项）=>{
返回（）
} )}
render（）{
返回（{this.renderFlight（）}）
}
}
ReactDOM.render（，document.getElementById（'Result'）；

我准备了一个示例，使用componentDidMount和fetch：

let{Table}=ReactBootstrap；
类示例扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
产品：[]
}
}
componentDidMount（）{
console.log（'componentDidMount..'）
取（'https://api.github.com/users/xiaotian/repos')
.then（response=>response.json（））
。然后（输出=>{
让产品=[]
for（设i=0；iconsole.log（this.state））
})
}
render（）{
返回(
挑选出来的
名称
{this.state.products.map（（项，i）=>{
返回(
{item.name}
) 
})}
)
}
}
ReactDOM.render(
, 
document.getElementById（'app'）
);

几个问题，为什么要使用jquery？为什么是ajax而不是fetch或axios？另外，您不能在构造函数中调用setState，请进行适当的读取。使用

componentDidMount

进行此操作。我是react native的新手，请编辑我的代码好吗？如果您是新手，请不要担心。你已经读过我添加的链接了吗？是的，但实际上我对componentDidMount感到困惑。我尝试使用componentDidMount（）{axios.post（

new.bc

，{startairline，classname，stops}），然后（res=>{const data=res.data；this.setState（{data}）；}）而不是$.ajax（{url://new bc new.bc），键入：“post”…}），但它不起作用！

class App extends React.Component {
  constructor(props){
    super(props);
      this.state = {
        data: [],
        }  
    $.ajax({
      url:"/test.bc",
      type:"get",
      success:(result)=>{
        this.setState({data: eval(result)});
      }
    })
    $(document).on('update_result',(event,startairline,classname,stops)=>{
      $.ajax({
        url:"/new.bc",
        type:"post",
        data:{
          startairline:startairline,
          stops:stops,
          classname:classname,
        },
        success:(result)=>{
          console.log(result)
          this.setState({hasBeenChanged: true,data:eval(result)})
        },
      })
    });
  }

  renderFlight(){
    return this.state.data.map((item)=>{ 
      return(<input type="hidden" value={item.total} name="total" /> )
    } )}

  render(){  
    return(<div>{this.renderFlight()}</div>  )
  }
}

ReactDOM.render(<App/>, document.getElementById('Result')); 

    let { Table } = ReactBootstrap;

    class Example extends React.Component {
        constructor(props, context) {
        super(props, context);

        this.state = {
            products: []
        }
        }

        componentDidMount() {
        console.log('componentDidMount..')
        fetch('https://api.github.com/users/xiaotian/repos')
            .then(response => response.json())
            .then(output => {
            let products = []
            for (let i = 0; i < output.length; i++) {
                products.push({selected:false,name:output[i].name})
            }

            this.setState({products},() => console.log(this.state))

        })

        }

        render() {

            return(<Table striped bordered condensed hover>
                <thead>
                <tr>
                    <th>Selected</th>
                    <th>Name</th>
                </tr>
                </thead>
                <tbody>
                {this.state.products.map((item, i) => {
                    return (
                        <tr><td><input type="checkbox" checked={item.selected}/></td><td>{item.name}</td></tr>
                    ) 
                })}
                </tbody>
            </Table>)
        }
    }

    ReactDOM.render(
        <Example />, 
        document.getElementById('app')
    );