Блог

У меня есть этот код, и я получаю сообщение об ошибке:

src/App.js Строка 5: 11: «состоянию» присваивается значение, но никогда не использовались неиспользуемые переменные.

Что я делаю не так? Спасибо за помощь!

 import Some from './Some/Some';

const App = () => {
    const state = ({
        persons: [
            {name: 'Connor', text: 'This is first.'},
            {name: 'Megan', text: 'This is second.'},
            {name: 'Jcob', text: 'This is third.'}
        ]
    }
);
    return (
        <div className="App">
            <h1>Hi, React!</h1>
            <Some name={this.state.persons[0].name} text={this.state.persons[0].text} />
            <Some name={this.state.persons[1].name} text={this.state.persons[1].text} />
            <Some name={this.state.persons[2].name} text={this.state.persons[2].text} />
        </div>
    );
}

export default App;
 

Вы должны ссылаться только на this.state внутренние компоненты класса. Внутри функциональных компонентов нет this , только локальные переменные.

Хотя вы могли бы изменить на:

 <Some name={state.persons[0].name} text={state.persons[0].text} />
 

Использование .map имело бы больше смысла, как и объявление только persons массива без окружающего объекта:

 const App = () => {
    const persons = [
        {name: 'Connor', text: 'This is first.'},
        {name: 'Megan', text: 'This is second.'},
        {name: 'Jcob', text: 'This is third.'}
    ];
    return (
        <div className="App">
            <h1>Hi, React!</h1>
            {
                persons.map(p => <Some name={p.name} text={p.text} />)
            }
        </div>
    );
}
 

Если вам нужно фактическое состояние в функциональном компоненте, вы должны использовать useState , например:

 const [persons, setPersons] = useState([
    {name: 'Connor', text: 'This is first.'},
    {name: 'Megan', text: 'This is second.'},
    {name: 'Jcob', text: 'This is third.'}
]);
 

(но текущий компонент, похоже, не выполняет ничего с сохранением состояния, по крайней мере, пока)