javascript - react 页面未呈现所有元素且没有标题

Question

我的 react 站点中有一个页面，它将加载从服务器检索的值的选项框，当用户从框中选择一个项目时，我会再次调用服务器以获取不同的数据(文件名和下载文件的 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 替换整个应用。相反，请在 render 方法中使用返回的 element:

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>
  )
}