ReactJSでajax呼び出し後の変数を更新していますか？

Question

ユーザーが状態を変更したときにAPIデータからページデータを取得する方法があります（これにはreact-route-domを使用）。いくつかのページには、より多くのデータを取得するために2回目のajax呼び出しが必要な属性があります。私が抱えている問題は、変数が二次情報で更新されていないことです。私は「なぜ」を理解するが、それを解決する方法は理解していない。

//page data gets pulled into a state and passed to a child component "page.js" 

//gets archive attribute 
var isArchive = customMeta.isArchive; 
//gets the archive target name 
var archiveName = customMeta.archiveName; 
//sets the initial value (mostly for debugging) 
var worksArchive = "hello world"; 

//checks if value exists and that it is an archive 
if(isArchive && isArchive == "true"){ 

    //only get the archive info if the name is also present 
    if(customMeta.archiveName) { 

     //make the ajax call to get the data for the archive pages 
     axios.get('http://admin.datasite.co/v2/'+archiveName) 
     .then((response) => { 
      var archivePages = response.data; 

      //if the archive is "works" then create a list of archive pages 
      if(archiveName == "works"){ 

       //run a loop for each page returning a link that passes through a history router 
       worksArchive = archivePages.map(function(work){ 


        return <Link key={work.id} className="work-item" to="/" ><img src={work.post_meta.targetimg} /></Link>; 

        }); 

      } 
     }) 
     .catch((error) => { 
      console.log(error); 
     }); 
    } 
} 

... 

{worksArchive} //this always outputs "hello world" 
... 

私はアヤックスとmapを通じてconsole.log EDをしましたし、すべてがエラーなしで正しいです。私はを知っています問題は、ドームが描かれた後に再び値が設定されるため、私はその変更が見られないのです。私は彼らの方法は状態としてこれを保存することですが、どのように問題を解決するか分からない。

Answer 1

コンポーネントの状態であなたのworksArchiveを保ち、setStateでそれを更新します。代わりに、 `{worksArchive}` `{使用this.state.worksArchive}の

class MyComponent extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = { 
      worksArchive: "hello world" //initial value 
     } 
    } 
    ... 
    //in axios then 
     var newWorksArchive = archivePages.map(function(work){ 
      return <Link key={work.id} className="work-item" to="/" ><img src={work.post_meta.targetimg} /></Link>; 
     }); 
     this.setState({worksArchive: newWorksArchive}); 
    ... 
} 

Answer 2

状態で作業してください。 Store archivePagesを空の配列として格納してレンダリングしてから、状態を設定した後は、状態が更新されたためにコンポーネントが再レンダリングされます。ここでは、それをどのように扱いたいかの例を示します。

class TestComponent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     archivePage: [] 
 
    }; 
 
    } 
 
    componentDidMount() { 
 

 
    //gets archive attribute 
 
    var isArchive = customMeta.isArchive; 
 
    //gets the archive target name 
 
    var archiveName = customMeta.archiveName; 
 
    //sets the initial value (mostly for debugging) 
 
    var worksArchive = "hello world"; 
 

 
    //checks if value exists and that it is an archive 
 
    if (isArchive && isArchive == "true") { 
 
     //only get the archive info if the name is also present 
 
     if (customMeta.archiveName) { 
 
     //make the ajax call to get the data for the archive pages 
 
     axios.get("http://admin.datasite.co/v2/" + archiveName) 
 
      .then(response => { 
 
      var archivePages = response.data; 
 

 
      //if the archive is "works" then create a list of archive pages 
 
      if (archiveName == "works") { 
 
       //run a loop for each page returning a link that passes through a history router 
 
       this.setState({ 
 
        archivePages: archivePages 
 
       }) 
 
      } 
 
      }) 
 
      .catch(error => { 
 
      console.log(error); 
 
      }); 
 
     } 
 
    } 
 

 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     {this.state.archivePages.map(work => { 
 
      return (
 
      <Link key={work.id} className="work-item" to="/"> 
 
       <img src={work.post_meta.targetimg} /> 
 
      </Link> 
 
     ); 
 
     })} 
 
     </div> 
 
    ); 
 
    } 
 
}