javascript - ReactJs - 如何在一个组件内传递数据

Question

我想将数据从axiosDidMount 函数 传递到

 <p className='title' id='boldTitle'>{data goes here}</p>

我可以 console.log 数据并且它正在工作，在我的示例中它是一个字符串“New York City”。

当我在 Search.js 组件中写入一些输入并通过 this.props.userQuery 将其传递给 Results.js 组件时，我已经到了重点。所以 response.data[1][1] 正在正确更新并在我写入输入时存在于 console.log 中，但是我无法将我从维基百科获得的数据传递到最终目的地。

在此示例中传递此数据的正确方法是什么？

import React from 'react';
import axios from 'axios';

export default class Results extends React.Component {

  axiosDidMount(userQuery) {
    //const fruits = [];
    const wikiApiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=';
    const wikiApiUrlWithQuery = wikiApiUrl + userQuery;
    axios.get(wikiApiUrlWithQuery) 
      .then(response => {
        console.log(response.data[1][1]); //New York City
        console.log(typeof(response.data[1][1])); //string
        //console.log(response.data[2])
        //console.log(response.data[3])
        //fruits.push(response.data[1]);
      }) 
      .catch(err => {
        console.log('Error: =>' + err); 
      });
    //return fruits;
  }

  render() {

    //this.props.userQuery from Search.js
    const test = this.axiosDidMount(this.props.userQuery);

    return(
      <div>
          <a className='title' href="" target='_blank'>
            <div className='result'>
              <p className='boldTitle'>{data goes here}</p>
            <p></p>
            </div>
          </a>
      </div>
    );
  }
}

Answer 1

你应该分开你的关注点。创建一个数据接收组件或一个容器组件来处理数据检索并在数据可用时有条件地呈现需要数据的组件。大致如下:

import React, { Component } from 'react';
import axios from 'axios';

const PresentationComponent = (props) => {
  // return mark with data
}

const PlaceHolderComponent = (props) => {
  // return placeholder markup
}

export default class DataReceivingWrapper extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      data: null
    }
  }
  
  componentDidMount() {
    axios.get(...)
      .then(data) {
        this.setState(Object.assign({}, this.state, { data: data }))
      }...
  }
  
  render() {
      if (this.props.data) {
        return <PresentationComponent />;
      } else {
        return <PlaceHolderComponent />; // or null
      }
  }
}