Блог

Главная - Вопросы по программированию - Не удалось экспортировать значение по умолчанию и другую функцию

Не удалось экспортировать значение по умолчанию и другую функцию

#reactjs

Вопрос:

План — визуализировать <List /> элемент index.js . Отображает элементы задач, созданные пользователем.

Ошибка —

 ./src/components/App.jsx
Attempted import error: './List' does not contain a default export (imported as 'List').

index.js —

 import React from 'react';
import ReactDOM from 'react-dom';
import {List, Render} from './components/List';
import App from './components/App';
import '../src/styles.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ReactDOM.render(
  <Render />
  , document.getElementById("list"));

Список.jsx —

 import react, { useRef } from 'react';
import ReactDOM from 'react-dom';

var todoItems = [];
const inputRef = useRef();

function onClick() {
    todoItems.push(inputRef.current.value);
    console.log("Pushed item in the array!");
    render(inputRef.current.value);
}

function Render(value) {
    todoItems.forEach(function a(item) {
        <h1>{item}</h1>
    });
}

function List() {

    return (
        <div className="mainbox">
            <div className="inputdiv">
                <input
                  type="text"
                  ref={inputRef}
                  placeholder="Enter Task..."
                  className="textbox"
                  id="taskName"
                />
                <button className="button" onClick={onClick}> </button>
            </div>
        </div>
    );

}

export {List, Render};

Я тоже пытался —

 export default List;
export {Render};

Но в нем говорится, что useRef() не может быть вызван на верхнем уровне.
Поэтому я переместил inputRef его в List() , но там сказано, что Render это не определено.

Спасибо!

P. S

После того, как эта проблема импорта/экспорта будет решена, появится <h1> ли дисплей?

 function Render(value) {
    todoItems.forEach(function a(item) {
        <h1>{item}</h1>
    });
}

Редактировать —

index.html —

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link font-family: "Montserrat" , sans-serif;
    href="https://fonts.googleapis.com/css?family=McLaren|Montserratamp;display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="../src/styles.css">
  <title>Mandy's Todo-List App!</title>
</head>

<body>
  <div id="root">
    <div id="list">
    </div>
  </div>
</body>

</html>

Комментарии:

1. Вам не нужно использовать два ReactDOM.render() s. И вам тоже не нужно манипулировать index.html .

2. Все, что завернуто внутри App компонента, в конечном итоге будет визуализировано внутри <div id='root'> . Визуализируйте свой todoItems внутренний List компонент, если хотите, а затем импортируйте List компонент внутри App компонента.

3. @Hamidreza Спасибо, но я получаю эту ошибку — Target container is not a DOM element. после import List, {Render} from './List'; function App() { ReactDOM.render( <Render /> , document.getElementById("list"));

4. Удалите второй ReactDOM.render() из index.js и <div id='list'> из index.html .

Ответ №1:

 import { useState, useEffect } from 'react';

function App() {
  const [value, setValue] = useState('');
  const [list, setList] = useState([]);

  function handleChange(event) {
    setValue(event.target.value);
  }

  function addTodo() {
    setList([...list, value]);
  }

  useEffect(() => setValue(''), [list]);

  return (
    <div className='App'>
      <input value={value} onChange={handleChange}/>
      <button onClick={addTodo}>Add</button>
      {list.map((item, index) => <h1 key={index}>{item}</h1>)}
    </div>
  );
}

export default App;
Метки: