Question

我的反应网站中有一个页面，它将加载从服务器检索到的一个选项框，当用户从框中选择一个项目时，我再次调用服务器以获取不同的数据（文件名和下载文件的URL。）

我无法工作的是两件事情1）当我从框中选择一个项目时，我进入一个没有我的标题的新页面以及在render（）调用之后显示的其他项目。 2）我可以遍历我的数组并获得我需要的项目，但我的href链接都没有显示。

  itemSelect(event){

    params.fileName= event.currentTarget[1].name

    restAPI.put(`/api/customers/files`, {params: event.nativeEvent.srcElement.value}).then(res =>{

      const element = (
        <div>
        {Object.entries(res.data).forEach(key => {
           if(key[1].name.length > 0){
                console.log('url', key[1].url)
                console.log('name', key[1].name)
          return <a href={key[1].url}>{key[1].name}</a>
           }
        })}
          <h1>Hello, world!</h1>
           <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
        );

      return ReactDOM.render(element, document.getElementById('root'));

      })
    }

  render() {
       const { folderList = {} } = this.state;

      return (
      <div id="root">
      <select name='folderListing' onChange={this.itemSelect.bind(this)}>
      {Object.values(folderList).map(function(item) {
         return <option key={item} name={item} id={item} value={item}>{item} </option>
      })}
      </select>
      </div>
      )
  }

Answer 1

由于这一行，您正在丢失元素：

return ReactDOM.render(element, document.getElementById('root'));

您正在使用element有效地替换整个应用。相反，请使用element方法中返回的render：

state = {
  links: null,
  folderList: {}
};

itemSelect(event){

  params.fileName= event.currentTarget[1].name

  restAPI.put(`/api/customers/files`, {params: event.nativeEvent.srcElement.value}).then(res =>{

    const element = (
      <div>
        {Object.entries(res.data).forEach(key => {
          if(key[1].name.length > 0){
            console.log('url', key[1].url)
            console.log('name', key[1].name)
            return <a href={key[1].url}>{key[1].name}</a>
          }
        })}
        <h1>Hello, world!</h1>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
      </div>
    );

    this.setState({
      links: element
    });

  });
}

render() {
  const { folderList = {}, links } = this.state;

  return (
    <div id="root">
      <select name='folderListing' onChange={this.itemSelect.bind(this)}>
        {Object.values(folderList).map(function(item) {
          return <option key={item} name={item} id={item} value={item}>{item} </option>
        })}
      </select>
      {links}
    </div>
  )
}

使用所有元素并且没有标题来反映页面不呈现

1 个答案: