Question

我有一个存储在.jsx文件中的字符串数组，并按如下方式导出：

Streamers.jsx：

const channels = ["freecodecamp","test_channel","dyrus", "uberdanger", 
"boxbox"];

module.exports = {channels};

App.jsx：

import channels from "../../variables/streamers.jsx";
class App extends Component {
  render() {
    return (
      <div className="App">
          <div className="card-container">
          {
            channels.map((channel, index) => {
            return (
              <Twitch key={index} streamer={channel} />
            );
            })
          }

          </div>
      </div>
    );
  }
}

export default App;

这反过来又让我误以为variables_streamers_jsx___default.a.map is not a function。 Error Screenshot

当我在App.jsx文件中本地定义数组时，它工作正常。我在这里做错了什么？

Answer 1

尝试从exports删除对象部分。您已将channels包装在对象中。删除对象部分或使用channels.channels

module.exports = channels;

或

channels.channels.map((channel, index) => {
   return (<Twitch key={index} streamer={channel} />);
})

如何在reactjs中映射导出的数组？

1 个答案: