使用钩子和 redux 材料 ui 将值设置为文本字段

Question

I'm building an app using react, redux, and redux-saga. The situation is that I'm getting information from an API. In this case, I'm getting the information about a movie, and I will update this information using a basic form. What I would like to have in my text fields is the value from the object of the movie that I'm calling form the DB. This is a brief part of my code: Im using 'name' as an example. Parent component:

 const MovieForm = (props) => {
  const {
    movie,
  } = props;

  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    onSubmit({
      name,
    });
  };

  const handleSetValues = () => {
    console.log('hi');
    console.log(movie, name);
    setName(movie.name);
    setValues(true);
  };

  useEffect(() => {
    if (movie && values === false) {
      handleSetValues();
    }
  });

  return (
    <Container>
      <TextField
        required
        **defaultValue={() => {
          console.log(movie, name);
          return movie ? movie.name : name;
        }}**
        label='Movie Title'
        onChange={(e) => setName(e.target.value)}
      />
    </Container>
  );
};

export default MovieForm;
    ....

child component

const MovieUpdate = (props) => {
  const { history } = props;
  const { id } = props.match.params;

  const dispatch = useDispatch();
  const loading = useSelector((state) => _.get(state, 'MovieUpdate.loading'));
  const created = useSelector((state) => _.get(state, 'MovieUpdate.created'));
  const loadingFetch = useSelector((state) =>
    _.get(state, 'MovieById.loading')
  );
  const movie = useSelector((state) => _.get(state, 'MovieById.results'));

  useEffect(() => {
    if (loading === false && created === true) {
      dispatch({
        type: MOVIE_UPDATE_RESET,
      });
    }
    if (loadingFetch === false && movie === null) {
      dispatch({
        type: MOVIE_GET_BY_ID_STARTED,
        payload: id,
      });
    }
  });

  const updateMovie = (_movie) => {
    const _id = id;
    const obj = {
      id: _id,
      name: _movie.name,
    }
    console.log(obj);
    dispatch({
      type: MOVIE_UPDATE_STARTED,
      payload: obj,
    });
  };

  return (
    <div>
      <MovieForm
        title='Update a movie'
        buttonTitle='update'
        movie={movie}
        onCancel={() => history.push('/app/movies/list')}
        onSubmit={updateMovie}
      />
    </div>
  );
};

export default MovieUpdate;

Then, the actual problem is that when I use the default prop on the text field the information appears without any problem, but if i use defaultValue it is empty.

Answer 1

Ok, I kind of got the answer, I read somewhere that the defaultValue can't be used int the rendering. So I cheat in a way, I set the properties multiline and row={1} (according material-ui documentation) and I was able to edit this field an receive a value to display it in the textfield