Я пытаюсь добавить компонент в своего робота-друзей-излишки, и я получил это предупреждение ниже. Я пытаюсь создать простой веб-сайт, на котором вы можете добавлять, обновлять, искать, удалять роботов.
Теперь, когда я добавил свой новый компонент, я получил эту ошибку ниже. Я сбит с толку, потому что я добавил все обработчики и подпорки, но я пишу это предупреждение, я не понимаю, и когда я пишу в полях моих компонентов обновления, никакие действия не запускаются. очень странно.
index.js:1 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
in input (at UpdateRobot.js:16)
in div (at UpdateRobot.js:7)
in Uppdate_Robot (at App.js:52)
in Route (at App.js:50)
in Switch (at App.js:39)
in div (at App.js:22)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:21)
in App (created by ConnectFunction)
in ConnectFunction (at src/index.js:22)
in Provider (at src/index.js:21)
Вот мое приложение. js файл внизу
import React, {
Component
} from 'react';
import {
Link,
Route,
Switch
} from 'react-router-dom';
import {
BrowserRouter as Router
} from 'react-router-dom';
import CardList from '../components/CardList';
import {
setName,
addRobot,
setUserName,
setEmail,
setId,
updateRobot
} from '../actions';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import ErrorBoundry from '../components/ErrorBoundry';
import Home from '../components/Home';
import {
connect
} from 'react-redux';
import AddRobot from '../components/AddRobot';
import UppdateRobot from '../components/UpdateRobot';
import DeleteRobot from '../components/DeleteRobot';
import './App.css';
function App({
robots,
name,
nameChange,
username,
userNameChange,
email,
emailChange,
addToList,
id,
idChange,
uppdate_robo
}) {
const stylecur = {
fill: 'currentcolor'
};
return ( <
Router >
<
div className = 'tc' >
<
header className = "bg-white black-80 tc pv4 avenir" >
<
a href = "/"
className = "bg-black-80 ba b--black dib pa3 w2 h2 br-100" >
<
svg className = "white"
data - icon = "skull"
viewBox = "0 0 32 32"
style = {
stylecur
} >
<
title > skull icon < /title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path > < /svg> <
/a> <
h1 className = "mt2 mb0 baskerville i fw1 f1" > RoboFriends < /h1> <
h2 className = "mt2 mb0 f6 fw4 ttu tracked" > Create an ensembe of Robot with your friends! < /h2> <
nav className = "bt bb tc mw7 center mt4 flex" >
<
Link to = {
'/about'
}
className = "f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > About page < /Link> <
Link to = {
'/addRobo'
}
className = "nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > Add robot < /Link> <
Link to = {
'/updateRobo'
}
className = "nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > Update robot < /Link> <
Link to = {
'/searchRobo'
}
className = "nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > Search robot < /Link> <
Link to = {
'/delRobo'
}
className = "nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > Delete robot < /Link> <
/nav> <
/header> <
Switch >
<
Route path = '/about'
component = {
Home
}
/>
<
Route path = '/addRobo'
render = {
props => < AddRobot {
...props
}
name = {
name
}
nameChange = {
nameChange
}
username = {
username
}
userNameChange = {
userNameChange
}
email = {
email
}
emailChange = {
emailChange
}
addToList = {
addToList
}
/>} /
>
<
Route
path = '/updateRobo'
render = {
props => < UppdateRobot {
...props
}
name = {
name
}
nameChange = {
nameChange
}
username = {
username
}
userNameChange = {
userNameChange
}
email = {
email
}
emailChange = {
emailChange
}
id = {
id
}
idChange = {
idChange
}
uppdate_robo = {
uppdate_robo
}
/>} /
>
<
/Switch> <
Scroll > {
<
ErrorBoundry >
<
CardList robots = {
robots
}
/> <
/ErrorBoundry>
} <
/Scroll> <
/div> <
/Router>
);
}
const mapStateToProps = (state) => {
return {
robots: state.manage_data.robots,
name: state.manage_data.name,
username: state.manage_data.username,
email: state.manage_data.email,
id: state.manage_data.id
}
}
const mapDispachToProps = (dispatch) => {
return {
nameChange: (event) => dispatch(setName(event.target.value)),
userNameChange: (event) => dispatch(setUserName(event.target.value)),
emailChange: (event) => dispatch(setEmail(event.target.value)),
idChange: (event) => dispatch(setId(event.target.value)),
addToList: () => dispatch(addRobot()),
uppdate_robo: () => dispatch(updateRobot)
}
}
export default connect(mapStateToProps, mapDispachToProps)(App);
Ниже мой AddRobot. js файл
import React from 'react';
const AddRobot = ({name,nameChange,username,userNameChange,email,emailChange,addToList}) => {
return (
<div>
<h1>Add Robot By Name</h1>
<input
className='pa2 ba b--green bg-lightest-blue'
placeholder='Add Name'
value={name}
onChange={nameChange}
/>
<input
className='pa2 ba b--green bg-lightest-blue'
placeholder='Add Username'
value={username}
onChange={userNameChange}
/>
<input
className='pa2 ba b--green bg-lightest-blue'
placeholder='Add Email'
value ={email}
onChange={emailChange}
/>
<button className="f50 link dim ph3 pv2 mb2 dib white bg-dark-green ma2"
href="addRobo"
onClick={addToList}
>
Add Robot
</button>
</div>
);
}
export default AddRobot;
Ниже мой UpdateRobot. js file
import React from 'react';
const Uppdate_Robot = ({
get_name,
name,
get_username,
username,
get_email,
email,
id,
idChange,
uppdate_robo
}) => {
return ( <
div >
<
h1 > Update Robot < /h1> <
input className = 'pa2 ba b--green bg-lightest-blue'
placeholder = 'Add ID Robot To Change'
value = {
id
}
onChange = {
idChange
}
/>
<
input className = 'pa2 ba b--green bg-lightest-blue'
placeholder = 'Change Name'
value = {
name
}
onChange = {
get_name
}
/>
<
input className = 'pa2 ba b--green bg-lightest-blue'
placeholder = 'Change Username'
value = {
username
}
onChange = {
get_username
}
/>
<
input className = 'pa2 ba b--green bg-lightest-blue'
placeholder = 'Change Email'
value = {
email
}
onChange = {
get_email
}
/>
<
button className = "f50 link dim ph3 pv2 mb2 dib white bg-dark-green"
href = "#0"
onClick = {
uppdate_robo
} >
Update Robot <
/button>
<
/div>
);
}
export default Uppdate_Robot;