Как получить обновленные данные в react

Как получить обновленные данные реакции, вызвав новые данные, которые будут получены с другой страницы с помощью ajax?

Как заменить новые данные в div "Результат".

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')); 

пара вопросов, почему вы используете jquery? почему ajax, а не fetch или axios?

c-chavez 31.10.2018 13:02

Кроме того, вы не можете вызвать setState в конструкторе, правильно прочитав в официальных документах. Используйте для этого componentDidMount.

c-chavez 31.10.2018 13:07

Я новичок в React Native. Не могли бы вы отредактировать мой код?

sahar 31.10.2018 13:23

не волнуйтесь, если вы новичок. Вы уже читали добавленную мной ссылку?

c-chavez 31.10.2018 13:28

Да, но на самом деле меня смущает componentDidMount. Я пытаюсь использовать componentDidMount () {axios.post (new.bc, {startairline, classname, stop}) .then (res => {const data = res.data; this.setState ({data});})} вместо $ .ajax ({url: "/ new.bc", type: "post", .........}), но это не работает!

sahar 31.10.2018 13:43

это правильный способ, почему не сработало? вы получили сообщение об ошибке? axios - это самый лучший и простой ИМХО. Посмотрите здесь

c-chavez 31.10.2018 14:01

Сообщение об ошибке: SyntaxError, и это из-за componentDidMount (). Я пробую добавленную вами ссылку, но в этой строке есть та же ошибка: let response = await axios (options);

sahar 31.10.2018 14:18

отредактируйте свой вопрос и добавьте код с этими изменениями, чтобы я мог видеть, что происходит. Если вы используете async / await, вам нужно сделать функцию асинхронной с async componentDidMount() {

c-chavez 31.10.2018 14:45

На моей странице есть div с именем Result. По умолчанию в этом div будут отображаться данные json.bc (json.bc содержит json), но после установки флажка данные newjson.bc (json) должны быть представлены в Result div и предыдущие данные должны быть удалены, а новые данные должны быть показаны в Div результатов.

sahar 31.10.2018 15:21

<div id = "Result"> </div>

sahar 31.10.2018 15:22

<script type = "text / babel"> класс App расширяет React.Component {конструктор (реквизиты) {супер (реквизиты); this.state = {данные: [],};

sahar 31.10.2018 15:22

$ .ajax ({url: "/ json.bc? from = [## cms.query.from ##] & to = [## cms.query.to ## ‌] & fdate = [## cms.query‌ .fdate ##] & tdate = [## c‌ ms.query.tdate ##] & ad‌ ult = [## cms.query.adu‌ lt ##] & child = [## cms.q‌ uery.child # #] & select‌ -age = [## cms.query.se‌ lect-age ##] & share = [# ‌ # cms.query.share ##] & ‌ userid = [## db.userid.‌ userid ##] ", тип:" get ", success: (result) => {this.setState ({data: eval (result)});}})

sahar 31.10.2018 15:23

$ (document) .on ('update_result', (event, startairline, classname‌, stop) => {componentDidMount () {axios.post (newjson.bc, {startairline, classname, stop, from: "[## cms.query .from ##] ", to:" [## cms.query.to ##] ", fdate:" [## cm‌ s.query.fdate ##] ", td‌ ate:" [## cms .query.td‌ ate ##] ", share:" [## cm‌ s.query.share ##] ", us‌ erid:" [## db.userid.u‌ serid ##] ", имя пользователя : "‌ [## db.UserName.answe‌ r ##]", adult: "[## cms.query.adult ##]", childcountandage: "[## cms.query.child ##] [ ## cms.query.select-age ##] ",}) .then (res => {console.log (res); console.log (res.data); const data = res.data;

sahar 31.10.2018 15:24

this.setState ({данные}); })}}); }

sahar 31.10.2018 15:24

renderFlight () {return this.state.data.map ((item) => {return (<div> {item.id} </div>)})} render () {return (<div> {this.renderFlight ()} </div>)}} ReactDOM.render (<App />, document.getElementById ('Результат'));

sahar 31.10.2018 15:25
1
15
186
1

Ответы 1

Я готовлю вам пример, используя componentDidMount и принести:

Здесь работает

    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')
    );

Другие вопросы по теме